import React, {useState} from 'react';
import {useTrans} from '@common/i18n/use-trans';
import {useFormContext} from 'react-hook-form';
import {FormTextField} from '@common/ui/forms/input-field/text-field/text-field';
import clsx from 'clsx';
import {EditIcon} from '@common/icons/material/Edit';
import {CreateCustomPagePayload} from '@common/admin/custom-pages/requests/use-create-custom-page';

export function ArticleEditorTitle() {
  const [editingTitle, setEditingTitle] = useState(false);
  const {trans} = useTrans();
  const form = useFormContext<CreateCustomPagePayload>();
  const watchedTitle = form.watch('title');

  const titlePlaceholder = trans({message: 'Title'});

  if (editingTitle) {
    return (
      <FormTextField
        placeholder={titlePlaceholder}
        autoFocus
        className="mb-30"
        onBlur={() => {
          setEditingTitle(false);
        }}
        name="title"
        required
      />
    );
  }
  return (
    <h1
      tabIndex={0}
      onClick={() => {
        setEditingTitle(true);
      }}
      onFocus={() => {
        setEditingTitle(true);
      }}
      className={clsx(
        'hover:bg-primary/focus rounded cursor-pointer',
        !watchedTitle && 'text-muted'
      )}
    >
      {watchedTitle || titlePlaceholder}
      <EditIcon className="icon-sm mx-8 mt-8 align-top text-muted" />
    </h1>
  );
}