/* eslint-disable no-param-reassign */
import React from 'react';

import { CustomPicker } from 'react-color';
import {
  EditableInput,
  Hue,
  Saturation,
} from 'react-color/lib/components/common';

import Button from '../Button';

import {
  Wrapper,
  HueWrapper,
  SaturationWrapper,
  Label,
  InputWrapper,
  Swatch,
} from './styled';

type Props = {
  hex: string;
  hsl: unknown;
  hsv: unknown;
  onChange: (info: ColorType) => void;
  onSubmit: (color: unknown) => void;
};

const ColorPicker: React.FC<Props> = ({
  hex,
  hsl,
  hsv,
  onChange,
  onSubmit,
}: Props) => {
  const styles = {
    input: {
      height: 28,
      width: '80px',
      border: `1px solid white`,
      color: 'white',
      backgroundColor: 'transparent',
      paddingLeft: 10,
      borderRadius: '4px',
    },
  };

  const handleClick = () => {
    onSubmit({ hex, hsl, hsv });
  };

  return (
    <Wrapper>
      <SaturationWrapper>
        <Saturation hsl={hsl} hsv={hsv} onChange={onChange} />
      </SaturationWrapper>
      <HueWrapper>
        <Hue hsl={hsl} onChange={onChange} />
      </HueWrapper>

      <InputWrapper>
        <Swatch bg={hex} />
        <Label>Hex</Label>
        <EditableInput
          label="hex"
          style={{ input: styles.input }}
          value={hex}
          onChange={onChange}
        />
        <Button
          appearance="primary-hollow"
          style={{ marginLeft: '100px' }}
          onClick={handleClick}
        >
          OK
        </Button>
      </InputWrapper>
    </Wrapper>
  );
};

const areEqual = (
  prevProps: Record<string, unknown>,
  nextProps: Record<string, unknown>,
) => {
  if (prevProps.color !== nextProps.color) {
    return false;
  }
  return true;
};

export default React.memo(CustomPicker(ColorPicker), areEqual);