import React, { useEffect, useState } from 'react';
import { HexColorPicker } from 'react-colorful';
import styled from 'styled-components';
import { uiColors } from '../../../constants/uiColors';
import { Button, ButtonTypes } from '../../Button';
import { ConfirmModal } from '../../ConfirmModal';
import { DraggableContainer } from '../../DraggableContainer';
import { RPGUIContainerTypes } from '../../RPGUI/RPGUIContainer';

interface IColorSelectorProps {
  selectedColor: string;
  isOpen: boolean;
  onClose: () => void;
  onConfirm: (color: string) => void;
  onChange: (color: string) => void;
  costWarning?: {
    cost: number;
    currency?: string;
  };
}

export const ColorSelector: React.FC<IColorSelectorProps> = ({
  selectedColor,
  isOpen,
  onClose,
  onConfirm,
  onChange,
  costWarning,
}) => {
  const [currentColor, setCurrentColor] = useState(selectedColor);
  const [showConfirmModal, setShowConfirmModal] = useState(false);

  useEffect(() => {
    if (isOpen) setCurrentColor(selectedColor);
  }, [isOpen, selectedColor]);

  const handleConfirm = (e: React.MouseEvent) => {
    e.preventDefault();
    if (costWarning) {
      setShowConfirmModal(true);
    } else {
      onConfirm(currentColor);
      onClose();
    }
  };

  const handleConfirmCost = () => {
    onConfirm(currentColor);
    setShowConfirmModal(false);
    onClose();
  };

  const handleClose = () => {
    setShowConfirmModal(false);
  };

  const renderConfirmMessage = () => (
    <ConfirmContent>
      <p>
        Cost:
        <CostDisplay>
          {costWarning?.cost.toLocaleString()}
          {costWarning?.currency || ' gold'}
        </CostDisplay>
      </p>
      <p>Proceed with color change?</p>
    </ConfirmContent>
  );

  if (!isOpen) return null;

  return (
    <>
      <DraggableContainer
        type={RPGUIContainerTypes.Framed}
        cancelDrag=".react-colorful"
        width="25rem"
        onCloseButton={onClose}
      >
        <Container>
          <Header>Select Color</Header>
          <ColorPickerWrapper>
            <HexColorPicker
              color={currentColor}
              onChange={color => {
                setCurrentColor(color);
                onChange(color);
              }}
            />
          </ColorPickerWrapper>
          <ButtonContainer>
            <Button
              buttonType={ButtonTypes.RPGUIButton}
              type="button"
              onClick={handleConfirm}
            >
              Confirm
            </Button>
          </ButtonContainer>
        </Container>
      </DraggableContainer>

      {showConfirmModal && costWarning && (
        <ConfirmModal
          message={renderConfirmMessage()}
          onConfirm={handleConfirmCost}
          onClose={handleClose}
        />
      )}
    </>
  );
};

const Container = styled.div`
  text-align: center;
  background: inherit;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
`;

const Header = styled.h2`
  color: white;
  font-size: 1rem;
  margin: 0;
  width: 100%;
  text-align: center;
`;

const ColorPickerWrapper = styled.div`
  display: flex;
  justify-content: center;
  width: 100%;

  .react-colorful {
    width: 100%;
    max-width: 200px;
  }
`;

const ButtonContainer = styled.div`
  display: flex;
  justify-content: center;
  width: 100%;
`;

const ConfirmContent = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.75rem;
`;

const CostDisplay = styled.span`
  color: ${uiColors.yellow} !important;
`;
