"use client"
import React, { useEffect, useState } from 'react';
import { useTranslations } from 'next-intl';
import { useAppSelector } from '@/lib/redux/hooks';
import { getSidebarSetting } from '@/lib/redux/features/serviceAdmin';
import Select from 'react-select';
import { makeStyles } from 'tss-react/mui';
import { ArrowDownWideNarrow, ArrowUpNarrowWide } from 'lucide-react';
import { SortEntity } from '@/types/sort';

type PropsType = {
  data?: any;
  classes?: any;
  onSort?: any;
  name?: any;
  valueSort?: any;
  isAsc?: any;
  disabled?: any;
  listSortField?: SortEntity[];
};


const HomeSort = (props: PropsType) => {
  const {
    data,
    onSort,
    name,
    valueSort,
    isAsc = false,
    disabled,
    listSortField = []
  } = props;

  const t = useTranslations("");
  const isHomeSearchPage = window.location.pathname.includes('home-search');

  const sidebarSetting = useAppSelector(getSidebarSetting);
  const { background, active, text, textActive } = sidebarSetting;

  const [sort, setSort] = useState<any>(null);
  
const useStyles = makeStyles()(() => {
  return ({
    sortBox: {
      display: 'flex',
      justifyContent: 'flex-end',
      alignItems: 'center'
    },
    sortIcon: {
      fontSize: '1.5rem',
      cursor: 'pointer',
      marginLeft: '0.5rem'
    },
    disabled: {
      opacity: 0.6,
      pointerEvents: 'none'
    }
  });
});
  const { classes } = useStyles();

  useEffect(() => {
    if (valueSort) {
      const init = listSortField.find((option) => option.field === valueSort);
      init && setSort({
        ...init,
        value: init.field,
        label: init.title
      });
    } else {
      setSort(null);
    }
  }, [data, valueSort, listSortField]);

  const handleSortOrder = () => {
    onSort && onSort(sort ? sort.value : null, !isAsc);
  };

  const changeSortValue = (selectedOption) => {
    setSort(selectedOption);
    onSort && onSort(selectedOption ? selectedOption.value : null, selectedOption.isAcsDefault);
  };

  return (
    <div className={classes.sortBox}>
      <Select
        id={name}
        value={sort}
        onChange={changeSortValue}
        // placeholder={t('label.sortBy')}
        options={listSortField.map(item => {
          return {
            ...item,
            value: item.field,
            label: item.title,
            isDisabled: isHomeSearchPage && item.field === 12
          };
        })}
        // className={classes.sortDropDown}
        isDisabled={disabled}
        styles={{
          container: base => ({
            ...base,
            width: '100%'
          }),
          control: base => ({
            ...base,
            border: 'none',
            boxShadow: 'none',
            backgroundColor: active || '#1aa758',
            '&:hover': {
              border: 'none',
              boxShadow: 'none'
            },
            // '&>div': {
            //   position: 'relative',
            //   '& div': {
            //     position: 'absolute',
            //   }
            // }
          }),
          option: (provided, { isSelected, isDisabled }) => ({
            ...provided,
            color: isDisabled && isHomeSearchPage ? '#cfccd6' : (isSelected ? `${textActive || '#fff'}!important` : `${text || '#707070'}!important`),
            backgroundColor: isSelected ? `${active || '#1aa758'}!important` : `${background || '#fff'}!important`,
            cursor: isDisabled && isHomeSearchPage ? 'default' : 'pointer',
            '&:hover': isDisabled && isHomeSearchPage ? {} : {
              color: `${textActive || '#fff'}!important`,
              backgroundColor: `${active || '#1aa758'}!important`
            }
          }),
          menuList: (base) => ({
            ...base,
            paddingBottom: 0,
            paddingTop: 0
          }),
          indicatorSeparator: () => ({
            display: 'none',
            marginLeft: 10,
          }),
          indicatorsContainer: (base) => ({
            ...base,
            color: textActive || '#fff'
          }),
          singleValue: (base) => ({
            ...base,
            color: textActive || '#fff'
          }),
          valueContainer: (base) => ({
            ...base,
            paddingLeft: '1rem'
          }),
          placeholder: () => ({
            color: textActive || '#fff'
          })
        }}
      />
      
      {/* <AppSelect
        id={name}
        value={sort}
        onChange={changeSortValue}
        className='w-full'
        disabled={disabled}
        placeholder={t('label.sortBy')}
        options={listSortField.map(item => {
          return {
            ...item,
            value: item.field,
            label: item.title,
            isDisabled: isHomeSearchPage && item.field === 12
          };
        })}
        
        optionHoverBgColor={`${active || '#1aa758'}`}
        optionHoverTextColor={`${textActive || '#fff'}`}
        optionBgColor={`${background || '#fff'}`}
        optionTextColor={disabled && isHomeSearchPage ? '#cfccd6' : `${text || '#707070'}`}
        selectBgColor={`${active || '#1aa758'}`}
        selectTextColor={`${textActive || '#fff'}`}
        optionActiveBgColor={`${active || '#1aa758'}`}
        optionActiveTextColor={`${textActive || '#fff'}`}
      /> */}
      {
        isAsc
          ? <div className={`${classes.sortIcon} ${!valueSort || disabled ? classes.disabled : ''}`} onClick={() => handleSortOrder()}>
            <ArrowUpNarrowWide/>
          </div>
          : <div className={`${classes.sortIcon} ${!valueSort || disabled ? classes.disabled : ''}`} onClick={() => handleSortOrder()}>
            <ArrowDownWideNarrow/>
          </div>
      }
    </div>
  );
};

export default  HomeSort