"use client";

import React, { forwardRef } from "react";
import { Select, SelectProps as AntSelectProps } from "antd";
import { cn } from "@/lib/utils";
import { makeStyles } from "tss-react/mui";

export interface OptionType {
  label: React.ReactNode;
  value: string | number;
  disabled?: boolean;
  className?: string;
  title?: string;
}

export interface SelectProps extends Omit<AntSelectProps, "bordered"> {
  size?: "large" | "middle" | "small";
  className?: string;
  options?: OptionType[];
  styles?: any;
  optionHoverBgColor?: string;
  optionHoverTextColor?: string;
  optionBgColor?: string;
  optionTextColor?: string;
  selectBgColor?: string;
  selectTextColor?: string;
  optionActiveBgColor?: string;
  optionActiveTextColor?: string;
}

type MakeStylesType = {
  optionHoverBgColor?: string;
  optionHoverTextColor?: string;
  optionBgColor?: string;
  optionTextColor?: string;
  selectBgColor?: string;
  selectTextColor?: string;
  optionActiveBgColor?: string;
  optionActiveTextColor?: string;
}

const useStyle = makeStyles<MakeStylesType>()((
  theme,
  {
    optionHoverBgColor,
    optionHoverTextColor,
    optionBgColor,
    optionTextColor,
    selectBgColor,
    selectTextColor,
    optionActiveBgColor,
    optionActiveTextColor
  }
) => ({
    container: {
      backgroundColor: selectBgColor ? selectBgColor + ' !important' : undefined,
      color: selectTextColor ? selectTextColor + ' !important' : undefined,
      margin: '0.5rem 0',
      '& .ant-select-selector': {
        backgroundColor: selectBgColor ? selectBgColor + ' !important' : undefined,
        color: selectTextColor ? selectTextColor + ' !important' : undefined,
        border: '1px solid #d9d9d9',

        borderRadius: `0 !important`,
        height: `38px !important`,
        '& .ant-select-selection-wrap': {
          height: '100% !important'
        }
      },
      '& .ant-select-arrow': {
        padding: '10px 0',
        // width: '100%',
        // display: 'flex',
        // justifyContent: 'center',
        // alignItems: 'center',
        // transform: translateY(-50%),
      },
      '.ant-select-selection-item': {
        color: selectTextColor ? selectTextColor + ' !important' : undefined,
      },
    },
    dropdown: {
      backgroundColor: `${optionBgColor || '#fff'} !important`,
      '& .ant-select-item-option': {
        backgroundColor: `${optionBgColor || '#fff'} !important`,
        color: `${optionTextColor || '#000'} !important`,
        borderRadius: 0,
      },
      '& .ant-select-item-option:hover': {
        backgroundColor: `${optionHoverBgColor || '#e6f7ff'} !important`,
        color: `${optionHoverTextColor || '#000'} !important`,
      },
      '& .ant-select-item-option-selected': {
        backgroundColor: `${optionActiveBgColor || '#bae7ff'} !important`,
        color: `${optionActiveTextColor || '#000'} !important`,
      },
    }
}));

const AppSelect = forwardRef<any, SelectProps>(
  (
    {
      className,
      size = "middle",
      options,
      value,
      defaultValue,
      styles,
      optionHoverBgColor,
      optionHoverTextColor,
      optionBgColor,
      optionTextColor,
      selectBgColor,
      selectTextColor,
      optionActiveBgColor,
      optionActiveTextColor,
      ...props },
    ref,
  ) => {
    
    const { classes } = useStyle({
      optionHoverBgColor,
      optionHoverTextColor,
      optionBgColor,
      optionTextColor,
      selectBgColor,
      selectTextColor,
      optionActiveBgColor,
      optionActiveTextColor
    });
    return (
      <Select
        ref={ref}
        value={value || undefined}
        defaultValue={defaultValue || undefined}
        options={options}
        className={cn(classes.container,"!w-full", className)}
        size={size}
        style={styles}
        dropdownClassName={classes.dropdown}
        {...props}
      />
    );
  },
);

AppSelect.displayName = "AppSelect";

export default AppSelect;