import Typography from '@material-hu/mui/Typography';

import HuCheckbox from '@material-hu/components/design-system/Checkbox/Checkbox';
import HuFormAutocomplete from '@material-hu/components/design-system/Inputs/Autocomplete/form';
import { TypedValueAutocompleteOption as HuTypedValueAutocompleteOption } from '@material-hu/components/design-system/Inputs/Autocomplete/types';
import HuMenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';

import useProfileFields from 'src/hooks/queryHooks/useProfileFields';
import { CustomFieldTypes } from 'src/types/instance';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { UserFields } from './constants';
import { ProfileFieldsAutocompleteProps } from './types';

function ProfileFieldsAutocomplete({
  name,
  rules,
  autocompleteProps,
}: ProfileFieldsAutocompleteProps) {
  const { t } = useLokaliseTranslation('users');
  const profileFieldsQuery = useProfileFields<
    HuTypedValueAutocompleteOption<string>[]
  >({
    select: response => [
      ...Object.values(UserFields).map(id => ({
        value: id,
        label: t(id === 'JOB_POSITION' ? 'POSITION' : `USER_FIELDS.${id}`), // TODO: change it when the JOB_POSITION translation is added into lokalise
      })),
      ...response.data
        .filter(
          field =>
            ![CustomFieldTypes.USER, CustomFieldTypes.USER_LIST].includes(
              field.type,
            ),
        )
        .map(field => ({ value: field.id, label: field.name })),
    ],
  });

  const options = profileFieldsQuery.data || [];

  return (
    <HuFormAutocomplete
      name={name}
      rules={rules}
      options={options}
      autocompleteProps={{
        isServerFiltered: false,
        loading: profileFieldsQuery.isLoading,
        // @ts-ignore TODO: Fix on material-hu
        multiple: true,
        sx: {
          marginTop: 2,
          backgroundColor: theme => theme.palette.common.white,
        },
        renderOption: (props, option, optionState) => {
          const { key, ...rest } = props;
          return (
            <HuMenuItem
              selected={optionState.selected}
              sx={{
                gap: 1,
                padding: 2,
              }}
              key={key}
              {...rest}
            >
              {!!autocompleteProps?.multiple && (
                <HuCheckbox checked={optionState.selected} />
              )}
              <Typography
                variant="globalS"
                sx={{
                  py: 1,
                }}
              >
                {option.label}
              </Typography>
            </HuMenuItem>
          );
        },
        ...autocompleteProps,
      }}
    />
  );
}

export default ProfileFieldsAutocomplete;