/**
 * @deprecated — no Hugo equivalent in `@material-hu`.
 * Inline-editable text field — click to edit, blur/enter to confirm.
 * Also uses deprecated local `FormTextField` internally.
 * Hint: could be composed from `InputClassic` from `@material-hu/components/design-system/Inputs/Classic`
 * with a custom click-to-edit wrapper.
 */
import { useEffect, useRef, useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';

import Divider from '@material-hu/mui/Divider';
import InputBase from '@material-hu/mui/InputBase';
import Stack, { StackProps } from '@material-hu/mui/Stack';
import { TextFieldProps } from '@material-hu/mui/TextField';
import Typography, { TypographyProps } from '@material-hu/mui/Typography';

import FormTextField from 'src/components/FormInputs/FormTextField';

type Props = {
  defaultValue: string;
  onRename?: (value: string) => any;
  onRenameInit?: Function;
  typographyProps?: TypographyProps;
  textFieldProps?: TextFieldProps;
  resetOnEmptyBlur?: boolean;
  isRenaming: boolean;
  bottomLine?: boolean;
  isSurvey?: boolean;
  isSurveyTable?: boolean;
  stackProps?: StackProps;
};

function ClickableTextField({
  defaultValue,
  onRename,
  onRenameInit,
  typographyProps,
  textFieldProps,
  resetOnEmptyBlur,
  isRenaming,
  bottomLine,
  stackProps,
  isSurvey = false,
  isSurveyTable = false,
}: Props) {
  const form = useForm({
    defaultValues: {
      name: defaultValue,
    },
  });
  const { name } = form.watch();
  const [previousState, setPreviousState] = useState(name);

  // couldn't make autofocus prop work correctly
  const inputRef = useRef(null);
  useEffect(() => {
    if (isRenaming) {
      inputRef.current?.focus();
    }
  }, [isRenaming]);

  useEffect(() => {
    setPreviousState(name);
    if (onRenameInit && isRenaming) onRenameInit();
  }, [isRenaming]);

  const handleRename = () => {
    const actualValue = resetOnEmptyBlur && !name ? previousState : name;
    form.setValue('name', actualValue);
    onRename(actualValue);
  };

  return (
    <>
      {isRenaming &&
        (isSurvey ? (
          <InputBase
            onBlur={handleRename}
            onChange={event => form.setValue('name', event.target.value)}
            value={name}
            inputRef={inputRef}
            sx={{
              fontSize: 22,
              ml: 3,
              mb: 1,
              fontWeight: 'light',
              width: 1000,
            }}
            fullWidth
            onKeyDown={ev => {
              if (ev.key === 'Enter') {
                ev.preventDefault();
                handleRename();
              }
            }}
          />
        ) : (
          <FormProvider {...form}>
            <FormTextField
              {...textFieldProps}
              onBlur={handleRename}
              name="name"
              inputRef={inputRef}
              onKeyDown={ev => {
                if (ev.key === 'Enter') {
                  ev.preventDefault();
                  handleRename();
                }
              }}
            />
          </FormProvider>
        ))}
      {!isRenaming && (
        <Stack
          sx={{
            width: '100%',
            '&:hover': {
              backgroundColor: isSurvey ? '#f7f7f7' : 'transparent',
            },
          }}
          {...stackProps}
        >
          {isSurveyTable && (
            <Typography
              {...typographyProps}
              sx={{
                maxWidth: 400,
                display: 'block',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              }}
            >
              {name}
            </Typography>
          )}
          {!isSurveyTable && (
            <Typography
              {...typographyProps}
              sx={{
                display: '-webkit-box',
                overflow: 'hidden',
                WebkitBoxOrient: 'vertical',
                WebkitLineClamp: 3,
                textOverflow: 'ellipsis',
                wordWrap: 'break-word',
              }}
            >
              {name}
            </Typography>
          )}
          {bottomLine && <Divider />}
        </Stack>
      )}
    </>
  );
}

export default ClickableTextField;