import React, { useState } from 'react';
import { FiCheckCircle, FiChevronDown, FiChevronUp } from 'react-icons/fi';
import { IoCheckmarkDone } from 'react-icons/io5';
import styled from 'styled-components';

const SelectContainer = styled.div`
  position: relative;
  width: 100%;
  max-width: 100%;
`;

const SelectTrigger = styled.div<{ $isOpen: boolean }>`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background: rgba(56, 124, 68, 0.1);
  border-radius: 10px;
  border: 1px solid #f9f8f6;
  cursor: pointer;
  transition: all 0.2s ease;
`;

const SelectedValue = styled.span`
  display: flex;
  align-items: center;
  gap: 8px;
  color: #777;
`;

const OptionsContainer = styled.ul<{ $isOpen: boolean }>`
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 5px;
  z-index: 10;
  display: ${(props) => (props.$isOpen ? 'block' : 'none')};
  padding-left: 0px;

  @media (max-width: 300px) {
    max-width: 100%;
  }
`;

const OptionItem = styled.li<{ $isSelected: boolean }>`
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: white;

  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
`;

interface Option {
  value: string;
  label: string;
  icon?: React.ReactNode;
}

interface CustomSelectProps {
  options: Option[];
  defaultValue?: Option;
  onChange?: (option: Option | null) => void;
  label?: string;
  icon?: React.ReactNode;
}

const CustomSelect: React.FC<CustomSelectProps> = ({
  options,
  defaultValue,
  onChange,
  label,
  icon = <IoCheckmarkDone size={16} />,
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedOption, setSelectedOption] = useState<Option | null>(
    defaultValue || null
  );

  const handleOptionClick = (option: Option) => {
    setSelectedOption(option);
    setIsOpen(false);
    onChange && onChange(option);
  };

  return (
    <div className="my-2">
      {label && <label className="block mb-2 text-sm">{label}</label>}
      <SelectContainer>
        <SelectTrigger $isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
          <SelectedValue>
            {selectedOption?.icon || icon}
            {selectedOption ? selectedOption.label : 'Select an option'}
          </SelectedValue>
          {isOpen ? (
            <FiChevronUp size={25} color="#387C44" />
          ) : (
            <FiChevronDown size={25} color="#387C44" />
          )}
        </SelectTrigger>
        <OptionsContainer $isOpen={isOpen}>
          {options.map((option) => (
            <OptionItem
              key={option.value}
              $isSelected={selectedOption?.value === option.value}
              onClick={() => handleOptionClick(option)}
            >
              <div className="flex items-center gap-2">{option.label}</div>
              {selectedOption?.value === option.value && (
                <FiCheckCircle size={16} />
              )}
            </OptionItem>
          ))}
        </OptionsContainer>
      </SelectContainer>
    </div>
  );
};

export default CustomSelect;