import React, { useEffect, useState, memo } from 'react';
import { Icon, } from 'antd';
import classNames from 'classnames';
import './index.scss';

export default memo((props) => {
  const { options, changeOptionId, type } = props;

  const [myOptions, setMyOptions] = useState(()=>{
    return JSON.parse(JSON.stringify(options));
  });
  const [option, setOption] = useState({
    name: '综合',
    type: 'default',
  });

  useEffect(() => {
    changeOptionId(option, type);
  }, [option]);

  function itemClick(activeItem) {
    const newOption = {
      ...activeItem,
      desc: !activeItem.desc
    };
    for (const item of myOptions) {
      if (item.type === activeItem.type) {
        item.desc = newOption.desc;
      }
    }
    setOption(newOption);
    setMyOptions(myOptions);
  }

  return (

    <div className="sort-box">
      {
        myOptions.map((item) => {
          return <div className={classNames({ "sort-item-checked": option.type === item.type, "sort-item": true })} key={item.type} onClick={() => { itemClick(item) }} >
            {item.name}
            {
              item.icon && <span className="caret-up-down">
                <Icon type="caret-up" className={classNames({ "caret-checked": !item.desc })} />
                <Icon type="caret-down" className={classNames({ "caret-checked": item.desc })} />
              </span>}
          </div>
        })
      }
    </div>

  )
})