import React from 'react';
import CheckboxGroup, { CheckboxValueType } from "antd/lib/checkbox/Group";
import { Row, Col, Radio, Checkbox } from 'antd';
import { RadioChangeEvent } from 'antd/lib/radio';
import { Icon } from '../../components/icons';
interface SelectItem {
  value: string //选中的值
  title: string //显示的内容
  disabled?: boolean // 是否禁用
}
interface ListItem {
  title: string
  value: any
  disabled?: boolean
  disabledField?: string // 不可选字段
  groupField?: string // 分组字段
  multiValue?: boolean // 是否多选
  showSearch?: boolean //是否支持搜索
  valueSep?: string // 多选的 拼接字符
  icon?: string //option 图标
}
interface GroupFieldItem {
  data: any[]
  label: string
}
interface SelectCheckbox {
  label: string;
  data: obj[];
  onChange: (value: any) => void; //值改变回调;
  type?: "single" | "multiple";
  defaultValue?: string[];
  isCombine?: boolean;//是否是结合图
  barValue?: string[];
  lineValue?: string[];
  setBarValue?: (value: string[]) => void;
  setLineValue?: (value: string[]) => void;
  hideToolbar?: boolean;//是否隐藏工具栏
}
interface SelectContent {
  label: string;
  data: obj[];
  onChange: (value: any) => void; //值改变回调;
  type?: "single" | "multiple";
  defaultValue?: string[];
}
//selectCheckbox
export function SelectWrapperGroup(props: SelectCheckbox): React.ReactElement {
  const { label, data, onChange, defaultValue, type = "multiple", isCombine, barValue, lineValue,
  setBarValue, setLineValue, hideToolbar } = props;
  const handleChange = (checkedValue: CheckboxValueType[]) => {
    if (type === 'multiple') {
      onChange(checkedValue)
    } else {
      const singleValue = checkedValue.slice(-1)
      onChange(singleValue)
    }
  }
  const handleSelectAll = () => {
    onChange(data?.filter(item => !item.disabled)?.map((item) => item.value) ?? [])
    if(isCombine && lineValue && barValue) {
      let newBarValue: string[] = [];
      data.forEach(item => {
        if(!defaultValue?.includes(item.value) && !item.disabled) {
          newBarValue.push(item.value)
        }
      })
      setBarValue?.([...barValue, ...newBarValue])
    }
  }
  const handleSelectReverse = () => {
    const allValues = data?.filter(item => !item.disabled)?.map((item) => item.value)
    const newValues = allValues.filter(function (v) { return defaultValue?.indexOf(v) == -1 })
    onChange(newValues)
    if(isCombine && lineValue && barValue) {
      setLineValue?.([])
      setBarValue?.(newValues)
    }
  }
  const handleSelectClear = () => {
    onChange([])
    if(isCombine) {
      setBarValue?.([])
      setLineValue?.([])
    }
  }
  //业务逻辑，组合图默认得有一个图的类型
  const handleClick = (value: string) => {
    if(isCombine && barValue && lineValue) {
      if(defaultValue?.includes(value)) {
        barValue.includes(value) ? setBarValue?.(barValue.filter(item => item !== value)) :
        setLineValue?.(lineValue.filter(item => item !== value))
      } else {
        setBarValue?.([...barValue, value])
      }
    }
  }
  const handleChangeChart = (e: MouseEvent, value: string) => {
    e.stopPropagation();
    if(isCombine && barValue && lineValue) {
      if(barValue.includes(value)) {
        setBarValue?.(barValue.filter(item => item !== value))
        setLineValue?.([...lineValue, value])
      } else {
        setLineValue?.(lineValue.filter(item => item !== value))
        setBarValue?.([...barValue, value])
      }
    }
  }
  return (
    <div className="common-select-container">
      <div className="sel-top">
        <span>{label}</span>
        {hideToolbar ? null : type === 'multiple' &&
          <div className="sel-btn-group">
            <span className="btn" onClick={handleSelectAll}>全选</span>
            <span className="btn" onClick={handleSelectReverse}>反选</span>
            <span className="btn" onClick={handleSelectClear}>不选</span>
          </div>}
      </div>
      <div className="sel-body">
        <CheckboxGroup onChange={handleChange} value={defaultValue}>
          {data?.map((item) => (
            <div title={item.title} onClick={() => handleClick(item.value)} key={item.value} className={`checkbox-container ${isCombine ? 'combine-chart-select' : ''}`}>
              <Checkbox disabled={item.disabled} value={item.value}>{item.title}</Checkbox>
              {isCombine && barValue?.includes(item.value) && !item.disabled && <div onClick={(e) => handleChangeChart(e, item.value) } className='combine-chart-item'>柱图</div>}
              {isCombine && lineValue?.includes(item.value) && !item.disabled && <div onClick={(e) => handleChangeChart(e, item.value)} className='combine-chart-item'>折线</div>}
            </div>
          ))}
        </CheckboxGroup>
      </div>
    </div>
  );
}
//统计内容
export function SelectContent(props: SelectContent): React.ReactElement {
  const { label, data, onChange, defaultValue } = props;
  const handleChange = (checkedValue: CheckboxValueType[]) => {
    onChange(checkedValue)
  }
  return (
    <div className="select-content-container">
      <div className="sel-content-top">{label}</div>
      <div className="sel-content-body">
        <CheckboxGroup onChange={handleChange} value={defaultValue}>
          {data?.map((item) => (
            <Checkbox disabled={item.disabled} key={item.value} value={item.value}>
              <div className="sel-content-item-container">
                <div className="icon-container">
                  <Icon icon={item.icon} className="icon" />
                </div>
                <span className="sel-title">{item.title}</span>
              </div>
            </Checkbox>
          ))}
        </CheckboxGroup>
      </div>
    </div>
  );
}

// select 和 label 包裹器
interface SelectProps {
  label: string | number;
  data: obj[];
  placeholder?: string;
  onChange: (value: any) => void;//值改变回调;
  type?: 'single' | 'multiple',
  className?: string;
  defaultValue?: any;
}

// 范围
interface DataAreaProps {
  onChange: (e: RadioChangeEvent) => void;
  value: string;
  className?: string;
  radioList?: ListItem[]
}
export function DataArea(props: DataAreaProps): React.ReactElement {
  const { value, onChange, className, radioList } = props;
  const classNm = className ? 'tools-area ' + className : 'tools-area'
  return (<Row className={classNm}>
    <Col span={4} className='tools-label'>
      <span>数据范围</span>
    </Col>
    <Col span={20}>
      <Radio.Group onChange={onChange} value={value}>
        {radioList?.length ?
          radioList.map(radio => <Radio key={radio.value} value={radio.value}>{radio.title}</Radio>)
          :
          [
            <Radio key='present' value='present'>当前页数据</Radio>,
            <Radio key='some' value='some'>选中数据</Radio>,
            <Radio key='all' value='all'>全部数据</Radio>
          ]
        }
      </Radio.Group>
    </Col>
  </Row>);
}


// 单选
interface RidioProps {
  onChange: (e: RadioChangeEvent) => void;
  value: string;
  title: string;
  data: any[];
  className?: string;
}
export function RadioWrapper(props: RidioProps): React.ReactElement {
  const { title, value, onChange, data, className } = props;
  const classNm = className ? 'tools-area ' + className : 'tools-area'
  return (<Row className={classNm}>
    <Col span={4} className='tools-label'>
      <span>{title}</span>
    </Col>
    <Col span={20}>
      <Radio.Group onChange={onChange} value={value}>
        {data.map(item => <Radio key={item.value} value={item.value}>{item.title}</Radio>)}
      </Radio.Group>
    </Col>
  </Row>);
}