"use client";

import React, { useMemo } from "react";
import Select, { SingleValue, StylesConfig } from "react-select";

import "./select-style.css";

interface SelectOption {
  value: string;
  label: string;
}

interface SelectAtomProps {
  label: string;
  value: string;
  onChange: (name: string, value: string) => void;
  name: string;
  options: Array<SelectOption>;
  placeholder?: string;
}

const SelectAtom: React.FC<SelectAtomProps> = ({
  label,
  value,
  onChange,
  name,
  options,
  placeholder = "All",
}) => {
  // Custom styles for react-select - memoized to prevent re-creation on every render
  const customStyles: StylesConfig<SelectOption, false> = useMemo(
    () => ({
      control: (provided) => ({
        ...provided,
        minHeight: "auto",
        height: "auto",
        border: "none",
        boxShadow: "none",
        backgroundColor: "transparent",
        cursor: "pointer",
        "&:hover": {
          border: "none",
        },
      }),
      valueContainer: (provided) => ({
        ...provided,
        padding: "0",
        fontFamily: "CreatoDisplay, sans-serif",
        fontSize: "16px",
        fontWeight: "normal",
        color: "#28241E",
        lineHeight: "1",
      }),
      input: (provided) => ({
        ...provided,
        margin: "0",
        padding: "0",
        fontFamily: "CreatoDisplay, sans-serif",
        fontSize: "16px",
        fontWeight: "normal",
        color: "#28241E",
      }),
      placeholder: (provided) => ({
        ...provided,
        margin: "0",
        fontFamily: "CreatoDisplay, sans-serif",
        fontSize: "16px",
        fontWeight: "normal",
        color: "#28241E",
      }),
      singleValue: (provided) => ({
        ...provided,
        margin: "0",
        fontFamily: "CreatoDisplay, sans-serif",
        fontSize: "16px",
        fontWeight: "normal",
        color: "#28241E",
      }),
      indicatorSeparator: () => ({
        display: "none",
      }),
      dropdownIndicator: (provided) => ({
        ...provided,
        padding: "0",
        color: "#28241E",
        "&:hover": {
          color: "#28241E",
        },
      }),
      menu: (provided) => ({
        ...provided,
        backgroundColor: "#E8E8E8",
        border: "none",
        borderRadius: "0",
        boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
        marginTop: "4px",
        zIndex: 9999,
        position: "absolute",
      }),
      menuList: (provided) => ({
        ...provided,
        padding: "0",
        maxHeight: "200px",
      }),
      option: (provided, state) => ({
        ...provided,
        backgroundColor: state.isSelected
          ? "#D1D5DB"
          : state.isFocused
          ? "#F3F4F6"
          : "#E8E8E8",
        color: "#28241E",
        fontFamily: "CreatoDisplay, sans-serif",
        fontSize: "16px",
        fontWeight: "normal",
        padding: "8px 12px",
        cursor: "pointer",
        "&:hover": {
          backgroundColor: "#F3F4F6",
        },
      }),
    }),
    []
  );

  // Find the selected option - memoized to prevent re-calculation on every render
  const selectedOption = useMemo(
    () => options.find((option) => option.value === value) || null,
    [options, value]
  );

  // Handle change
  const handleChange = (selectedOption: SingleValue<SelectOption>) => {
    if (selectedOption) {
      onChange(name, selectedOption.value);
    }
  };

  return (
    <div className="flex flex-col bg-[#E8E8E8] py-7 pl-5 pr-10 relative select-wrapper">
      {/* Label */}
      <label className="font-creato font-normal text-sm text-[#28241E] tracking-wide leading-none pb-3">
        {label}
      </label>

      {/* React Select Dropdown */}
      <div className="relative select-container">
        <Select
          value={selectedOption}
          onChange={handleChange}
          options={options}
          placeholder={placeholder}
          styles={customStyles}
          isSearchable={false}
          className="react-select-container"
          classNamePrefix="react-select"
          instanceId={`select-${name}`}
        />
      </div>
    </div>
  );
};

export default SelectAtom;