import { useFormContext } from 'react-hook-form';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuCheckbox from '@material-hu/components/design-system/Checkbox/Checkbox';
import HuFormAutocomplete from '@material-hu/components/design-system/Inputs/Autocomplete/form';
import HuMenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';
import HuTitle from '@material-hu/components/design-system/Title';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { roleOptions } from '../utils';

type Props = {
  name: string;
  autocompleteProps?: any;
};

function HuRolesAutocomplete({ name, autocompleteProps }: Props) {
  const { t } = useLokaliseTranslation('workflows');
  const form = useFormContext();

  const hasSelectedValues = form.watch(name)?.length > 0;

  return (
    <HuFormAutocomplete
      name={name}
      autocompleteProps={{
        label: t('approval_requested_to_roles'),
        multiple: true,
        renderOption: (props, option, { selected }) => {
          const { key, ...rest } = props;
          return (
            <HuMenuItem
              selected={selected}
              key={key}
              {...rest}
              sx={{ gap: 2 }}
            >
              <HuCheckbox checked={selected} />
              <HuAvatar
                src={undefined}
                size="medium"
                color="primary"
                sx={{ my: 1 }}
              />
              <HuTitle
                variant="S"
                title={option.label}
                description={option.sublabel}
                sx={{
                  maxWidth: '100%',
                  '& .MuiTypography-root': {
                    whiteSpace: 'normal',
                    wordWrap: 'break-word',
                  },
                }}
              />
            </HuMenuItem>
          );
        },
        ...autocompleteProps,
        placeholder: hasSelectedValues
          ? undefined
          : autocompleteProps?.placeholder,
      }}
      options={roleOptions(t)}
    />
  );
}

export default HuRolesAutocomplete;