import { FC, useEffect, useRef, useState } from 'react';
import { useFormContext } from 'react-hook-form';

import Edit from '@material-hu/icons/material/Edit';
import ButtonBase from '@material-hu/mui/ButtonBase';
import Divider from '@material-hu/mui/Divider';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography, { TypographyProps } from '@material-hu/mui/Typography';

import { useLokaliseTranslation } from 'src/utils/i18n';
import FormTextField, {
  FormTextFieldProps,
} from 'src/components/FormInputs/FormTextField';

export type FormClickeableTextFieldProps = FormTextFieldProps & {
  bottomLine?: boolean;
  typographyProps?: TypographyProps;
};

export const FormClickeableTextField: FC<
  FormClickeableTextFieldProps
> = props => {
  const {
    bottomLine = false,
    name,
    fullWidth = true,
    typographyProps = {},
    valueAsPlaceholder = false,
    helperText,
    ...textFieldProps
  } = props;

  const [isEditing, setIsEditing] = useState(false);

  const inputRef = useRef<HTMLInputElement>(null);
  const { t } = useLokaliseTranslation(['general']);
  const { watch } = useFormContext();
  const theme = useTheme();

  useEffect(() => {
    if (isEditing) {
      inputRef?.current?.focus();
    }
  }, [isEditing]);

  const handleOpenEdit = () => setIsEditing(true);
  const handleCloseEdit = () => setIsEditing(false);

  return (
    <Stack
      sx={{
        width: fullWidth ? '100%' : undefined,
        gap: theme.spacing(1),
        height: '66px',
        justifyContent: 'flex-start',
      }}
    >
      {isEditing && (
        <FormTextField
          name={name}
          inputRef={inputRef}
          onBlur={handleCloseEdit}
          variant="standard"
          margin="dense"
          fullWidth={fullWidth}
          valueAsPlaceholder={valueAsPlaceholder}
          helperText={helperText}
          sx={{
            mb: 0,
            ...textFieldProps?.sx,
          }}
          {...textFieldProps}
        />
      )}
      {!isEditing && (
        <Stack
          sx={{
            width: fullWidth ? '100%' : undefined,
            gap: theme.spacing(1),
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'flex-start',
            p: '4px 0px 5px',
            mb: helperText ? '23px' : undefined,
            mt: '3px',
          }}
        >
          <ButtonBase
            {...typographyProps}
            onClick={handleOpenEdit}
            disableRipple
            component={Typography}
            sx={{
              width: 'calc(100% - 48px)',
              display: '-webkit-box',
              overflow: 'hidden',
              WebkitBoxOrient: 'vertical',
              WebkitLineClamp: 3,
              textOverflow: 'ellipsis',
              wordWrap: 'break-word',
              mt: 0,
              color: valueAsPlaceholder ? theme.palette.text.disabled : '',
              ...typographyProps?.sx,
            }}
          >
            {watch(name)}
          </ButtonBase>
          <Tooltip title={t('edit')}>
            <IconButton
              aria-label={t('edit')}
              onClick={handleOpenEdit}
              sx={{
                py: 0,
              }}
            >
              <Edit />
            </IconButton>
          </Tooltip>
        </Stack>
      )}
      {bottomLine && <Divider />}
    </Stack>
  );
};

export default FormClickeableTextField;