import React from 'react';

import { getHashtagSetting } from '@/lib/redux/features/serviceAdmin';
import { useAppSelector } from '@/lib/redux/hooks';
import { HashTagSetting } from '@/types/serviceAdmin';
import { HashTag } from '@/types/hashtag';
import { makeStyles } from 'tss-react/mui';


const ChoiceHashTagField = ({ hashtagIds, options, minWidth, onSelected, disabled, isMultiSelect, name }: PropTypes) => {

  const hashtagSetting: HashTagSetting = useAppSelector(getHashtagSetting) || {} as HashTagSetting ;

  const useStyles = makeStyles()(() => ({
    unPaddingTop: {
      paddingTop: 0
    },
    alignCenter: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    },
    inputBox: {
      alignItems: 'center',
      display: 'flex',
      flexDirection: 'row',
      marginBottom: '0!important',
      '& label': {
        minWidth: minWidth,
        paddingRight: '0.5rem',
        margin: 0
      }
    },
    colInput: {
      alignItems: 'flex-start',
      flexDirection: 'column',
      justifyContent: 'center'
    },
    input: {
      width: '100%',
      margin: '0.5rem 0!important'
    },
    box: {
      display: 'flex',
      justifiedContent: 'space-between',
      alignContent: 'space-between',
      flexWrap: 'wrap',
      width: '100%'
    },
    item: {
      margin: '0 3px',
      border: '1px solid #d2d2d2',
      minHeight: 30,
      minWidth: minWidth,
      borderRadius: 15,
      wordBreak: 'break-word',
      textAlign: 'center',
      padding: '0 0.5rem',
      marginBottom: '0.25rem',
      cursor: 'pointer',
      fontSize: `${hashtagSetting.fontSize ? hashtagSetting.fontSize : 14}px`,
      background: hashtagSetting.deselectedBackground ? hashtagSetting.deselectedBackground : '',
      color: hashtagSetting.deselectedTextColor ? hashtagSetting.deselectedTextColor : '',
      '&:hover': {
        opacity: '0.5'
      },
      '&.active': {
        background: hashtagSetting.selectedBackground ? hashtagSetting.selectedBackground : '#1aa758',
        borderColor: 'white',
        color: hashtagSetting.selectedTextColor ? hashtagSetting.selectedTextColor : '#FFFFFF'
      }
    }
  }));
  const { classes } = useStyles();

  const handleSelectedOptionChange = (id: any) => {
    let newValue: any[];
    const existValue = hashtagIds.filter((item: any) => item === id)[0];
    if (existValue) {
      if (isMultiSelect) {
        newValue = hashtagIds.filter((item: any) => item !== id);
      } else {
        newValue = [];
      }
    } else {
      if (isMultiSelect) {
        newValue = [...hashtagIds, id];
      } else {
        newValue = [id];
      }
    }
    onSelected && onSelected(newValue);
  };
  
  return (
    <div className={`${classes.inputBox} `}>
      <div className={classes.box}>
        {
          options.map(({ id, value: itemLabel }) => (
            <div
              key={`multi-${id}`}
              className={`${classes.alignCenter} ${classes.item} ${hashtagIds.includes(id) && 'active'} ${disabled ? 'disabled' : ''}`}
              onClick={() => !disabled && handleSelectedOptionChange(id)}
            //   disabled={disabled}
            >
              {itemLabel}
            </div>
          ))
        }
      </div>
    </div>
  );
};

type PropTypes = {
  disabled: boolean,
  options: HashTag[],
  onSelected: any,
  minWidth: number,
  isMultiSelect: boolean,
  hashtagIds: any[],
  name: string
};

export default ChoiceHashTagField;