import React from 'react';
import {
  Select,
  selectClasses,
  MenuItem,
  Checkbox,
  ListItemText,
  OutlinedInput,
  FormControl,
  styled,
} from '@mui/material';

import { DEVTOOLS_Z_INDEX } from '../../constants';
import { useDialogContext, useDialogActions } from './dialogContext';

const StyledFormControl = styled(FormControl)`
  min-width: 200px;
`;

const Drowpdown = () => (
  <div style={{ position: 'absolute', right: '12px' }}>
    <svg
      width="10"
      height="7"
      viewBox="0 0 10 7"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M5.00019 6.50019C4.86858 6.50095 4.73812 6.47572 4.61628 6.42596C4.49444 6.37619 4.38363 6.30287 4.29019 6.21019L0.290185 2.21019C0.101882 2.02188 -0.00390625 1.76649 -0.00390625 1.50019C-0.00390625 1.23388 0.101882 0.978489 0.290185 0.790185C0.478489 0.601881 0.733884 0.496094 1.00019 0.496094C1.26649 0.496094 1.52188 0.601881 1.71019 0.790185L5.00019 4.09019L8.29019 0.790185C8.47849 0.601881 8.73388 0.496094 9.00019 0.496094C9.26649 0.496094 9.52188 0.601881 9.71018 0.790185C9.89849 0.978489 10.0043 1.23388 10.0043 1.50019C10.0043 1.76649 9.89849 2.02188 9.71018 2.21019L5.71019 6.21019C5.61675 6.30287 5.50593 6.37619 5.38409 6.42596C5.26225 6.47572 5.13179 6.50095 5.00019 6.50019Z"
        fill="black"
        fill-opacity="0.65"
      />
    </svg>
  </div>
);
const StyledSelect = styled(Select<string[]>)`
  & .${selectClasses.icon} {
    width: 24px;
    height: 24px;
    top: calc(50% - 12px);
  }
`;

export const LanguageSelect: React.FC = () => {
  const { onSelectedLanguagesChange } = useDialogActions();
  const availableLanguages = useDialogContext((c) => c.availableLanguages);
  const selectedLanguages = useDialogContext((c) => c.selectedLanguages);

  const options = availableLanguages
    ? [...availableLanguages].map((lang) => ({
        label: lang.name,
        value: lang.tag,
      }))
    : [];

  const selected = options.filter((o) => selectedLanguages.includes(o.value!));
  const onChange = (value: string | string[]) => {
    const languages = typeof value === 'string' ? value.split(',') : value;
    onSelectedLanguagesChange(languages);
  };

  return (
    <>
      {availableLanguages && (
        <StyledFormControl
          variant="outlined"
          size="small"
          style={{ maxWidth: 250 }}
        >
          <StyledSelect
            multiple
            value={selected.map((o) => o.value)}
            IconComponent={Drowpdown}
            onChange={(e) => onChange(e.target.value as string | string[])}
            input={<OutlinedInput />}
            sx={{ borderRadius: '8px' }}
            renderValue={(selected) => selected.join(', ')}
            MenuProps={{
              style: { zIndex: DEVTOOLS_Z_INDEX },
              disablePortal: true,
            }}
          >
            {options.map((option) => (
              <MenuItem key={option.value} value={option.value} dense>
                <Checkbox
                  size="small"
                  checked={Boolean(
                    selected.find((o) => o.value === option.value)
                  )}
                />
                <ListItemText>{option.label}</ListItemText>
              </MenuItem>
            ))}
          </StyledSelect>
        </StyledFormControl>
      )}
    </>
  );
};