import { isEqual, isNil } from 'lodash-es';
import { useCallback, useEffect, useState } from 'react';
import { ActionIcon } from './ActionIcon';
import { ColorPicker } from './ColorPicker';
import styles from './FloatColorPicker.module.css';

type FloatColorPickerProps = {
  name?: string;
  color?: string | null;
  onPick?: (color: string | null | undefined) => void;
};

export function FloatColorPicker({ name, color, onPick }: FloatColorPickerProps) {
  const [pickedColor, setPicked] = useState<string | null>(color ?? null);
  const [showPicker, setPickerShow] = useState(false);
  const handlePickAction = useCallback(
    (value: string) => {
      setPicked(value);
      onPick?.(value);
    },
    [onPick],
  );

  useEffect(() => {
    if (!isEqual(pickedColor, color)) {
      setPicked(color);
    }
  }, [color]);

  return (
    <div className={styles.float_color_picker}>
      <div className={styles.preview}>
        <div
          className={styles.preview_block}
          onClick={() => setPickerShow(true)}
          style={{
            backgroundColor: isNil(pickedColor) ? 'rgba(0, 0, 0, 0)' : `#${pickedColor}`,
          }}>
          {isNil(pickedColor) && <span>N/A</span>}
        </div>
        <ActionIcon icon="tabler:x" onClick={() => handlePickAction(null)} />
      </div>
      {showPicker && (
        <div className={styles.picker}>
          <ColorPicker color={pickedColor ?? null} onSelect={handlePickAction} />
          <div className={styles.btns}>
            <button type="button" className="primary" onClick={() => setPickerShow(false)}>
              Done
            </button>
          </div>
        </div>
      )}
      {!isNil(name) && <input type="hidden" name={name} value={pickedColor ?? ''} />}
    </div>
  );
}