import { useCallback } from 'react';

import { IconCircleFilled } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuFormInputSelect from '@material-hu/components/design-system/Inputs/Select/form';

import { ShiftColor } from 'src/types/shifts';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { COLOR_OPTIONS } from '../../../constants';
import { shiftFormFields } from '../../../form';
import { SHIFT_CARD_COLORS } from '../../ShiftsTable/constants';

const ShiftColorSelect = () => {
  const { palette } = useTheme();
  const { t } = useLokaliseTranslation(['shifts', 'general']);

  const renderColorCircle = useCallback(
    (color: ShiftColor) => (
      <IconCircleFilled
        style={{
          color: SHIFT_CARD_COLORS(palette)[color].accentBorderColor,
          stroke: 'unset',
        }}
      />
    ),
    [],
  );

  return (
    <Stack sx={{ flexShrink: 0 }}>
      <HuFormInputSelect
        name={shiftFormFields.color}
        inputProps={{
          label: t('general:color'),
          options: COLOR_OPTIONS,
          renderOption: option => (
            <Stack
              sx={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 1,
              }}
            >
              {renderColorCircle(option.value as ShiftColor)}
              <Typography variant="globalS">{t(option.label)}</Typography>
            </Stack>
          ),
          sx: {
            width: 200,
            '&:hover:not(:focus-within) .MuiOutlinedInput-notchedOutline': {
              borderColor: palette.new.border.neutral.default,
            },
          },
        }}
      />
    </Stack>
  );
};

export default ShiftColorSelect;
