"use client";

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

import "./select-mobile-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 MobileSelectAtom: React.FC<SelectAtomProps> = ({
  label,
  value,
  onChange,
  name,
  options,
  placeholder = "All",
}) => {
  // Check if label is empty for minimal styling
  const isMinimal = !label || label.trim() === "";

  // 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: isMinimal ? "15px" : "16px",
        fontWeight: "normal",
        color: "#1F2937",
        lineHeight: "1.4",
      }),
      input: (provided) => ({
        ...provided,
        margin: "0",
        padding: "0",
        fontFamily: "CreatoDisplay, sans-serif",
        fontSize: isMinimal ? "15px" : "16px",
        fontWeight: "normal",
        color: "#1F2937",
      }),
      placeholder: (provided) => ({
        ...provided,
        margin: "0",
        fontFamily: "CreatoDisplay, sans-serif",
        fontSize: isMinimal ? "15px" : "16px",
        fontWeight: "normal",
        color: "#6B7280",
      }),
      singleValue: (provided) => ({
        ...provided,
        margin: "0",
        fontFamily: "CreatoDisplay, sans-serif",
        fontSize: isMinimal ? "15px" : "16px",
        fontWeight: "normal",
        color: "#1F2937",
      }),
      indicatorSeparator: () => ({
        display: "none",
      }),
      dropdownIndicator: (provided) => ({
        ...provided,
        padding: "0",
        color: "#9CA3AF",
        "&:hover": {
          color: "#6B7280",
        },
      }),
      menu: (provided) => ({
        ...provided,
        backgroundColor: "#FFFFFF",
        border: "1px solid #E5E7EB",
        borderRadius: "4px",
        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
        marginTop: "8px",
        zIndex: 9999,
        position: "absolute",
      }),
      menuList: (provided) => ({
        ...provided,
        padding: "4px 0",
        maxHeight: "200px",
      }),
      option: (provided, state) => ({
        ...provided,
        backgroundColor: state.isSelected
          ? "#F3F4F6"
          : state.isFocused
          ? "#F9FAFB"
          : "#FFFFFF",
        color: state.isSelected ? "#111827" : "#374151",
        fontFamily: "CreatoDisplay, sans-serif",
        fontSize: "14px",
        fontWeight: state.isSelected ? "500" : "normal",
        padding: "10px 16px",
        cursor: "pointer",
        transition: "background-color 0.15s ease",
        "&:hover": {
          backgroundColor: "#F9FAFB",
        },
      }),
    }),
    [isMinimal]
  );

  // 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);
    }
  };

  // Minimal style wrapper (no background, no padding)
  if (isMinimal) {
    return (
      <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>
    );
  }

  // Original style with label and background
  return (
    <div className="flex flex-col bg-[#E8E8E8] py-5 xl:py-7 pl-3 sm: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 MobileSelectAtom;