import { FC, useState } from 'react';
import { ChromePicker } from 'react-color';

import Dialog from '@material-hu/mui/Dialog';
import DialogActions from '@material-hu/mui/DialogActions';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogTitle from '@material-hu/mui/DialogTitle';

import Button from '@material-hu/components/design-system/Buttons/Button';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type ColorPickerDialogProps = {
  value?: any;
  handleClose?: any;
  handleOnSave?: any;
};

export const ColorPickerDialog: FC<ColorPickerDialogProps> = props => {
  const { value, handleClose, handleOnSave } = props;

  const { t } = useLokaliseTranslation('authentication');

  const [colors, setColors] = useState(value);

  const colorPicker = e => {
    const newColor = {
      hex: e.hex,
      rgb: `(${e.rgb.r},${e.rgb.g},${e.rgb.b},${e.rgb.a})`,
    };
    setColors(newColor.hex);
  };

  const handleOnSaveChanges = () => {
    handleOnSave(colors);
    handleClose();
  };

  return (
    <Dialog
      open
      onClose={handleClose}
    >
      <DialogTitle>{t('SELECT_COLOR')}</DialogTitle>
      <DialogContent>
        <ChromePicker
          color={colors}
          onChange={e => colorPicker(e)}
          disableAlpha
          renderers={false}
        />
      </DialogContent>
      <DialogActions>
        <Button
          autoFocus
          onClick={handleOnSaveChanges}
        >
          {t('SAVE_CHANGES')}
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default ColorPickerDialog;
