import React, { useEffect, useState } from 'react';
import { Button, Col, Form, Input, Modal, Radio, Row } from 'antd';
import type { MenuItem, RoleInfo, RoleListItem } from '../data';
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
import { CheckboxValueType } from 'antd/lib/checkbox/Group';

export interface CheckboxProps {
  // onCancel: () => void;
  onSubmit: (values: string[] | CheckboxValueType[]) => void;
  // onDelete: (values: string) => void;
  // updateModalVisible: boolean;
  // plainOptions[]
  is_inherent: boolean;
  currentRoleData: Partial<RoleInfo>;
  currentMenuData: Partial<MenuItem>;

  setMenuItem: React.Dispatch<React.SetStateAction<MenuItem[]>>
}

const FormItem = Form.Item;

const formLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 13 },
};

const style: React.CSSProperties = {
  // background: '#0092ff',
  // padding: '8px 0',
  marginBottom: "30px",
  marginRight: "3px",
};

const CheckboxList: React.FC<CheckboxProps> = (props) => {

  const {
    onSubmit,
    setMenuItem,
    is_inherent,
    currentRoleData,
    currentMenuData,
  } = props;

  const defaultCheckedList: string[] = currentRoleData.privileges!;
  // const options = [
  //   { label: 'Apple', value: 'Apple' },
  //   { label: 'Pear', value: 'Pear' },
  //   { label: 'Orange', value: 'Orange' },
  // ];

  const plainOptions: string[] = currentMenuData.children ? currentMenuData.children.map(item => item.name) : []




  let options = currentMenuData.children ? currentMenuData.children.map((item, index) => {

    return {
      label: item.label,
      value: item.name,
      isChecked: false,
    }
  }) : []

  // const optionsWithDisabled = [
  //   { label: 'Apple', value: 'Apple' },
  //   { label: 'Pear', value: 'Pear' },
  //   { label: 'Orange', value: 'Orange', disabled: false },
  // ];
  const [checkedList, setCheckedList] = useState<CheckboxValueType[]>(defaultCheckedList);
  // const [checkedList, setCheckedList] = useState(defaultCheckedList);
  const [indeterminate, setIndeterminate] = useState(true);
  const [checkAll, setCheckAll] = useState(false);

  const onChangeCheck = (list: CheckboxValueType[]) => {

    console.log(list)
    // console.log(currentMenuData, currentRoleData)
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);

    onSubmit(list)
  };

  const onCheckAllChange = (e: CheckboxChangeEvent) => {
    setCheckedList(e.target.checked ? plainOptions : []);


    // console.log(e.target.checked, options)
    setIndeterminate(false);
    setCheckAll(e.target.checked);
    if (e.target.checked) {
      console.log(plainOptions)
      onSubmit(plainOptions)
    }

  };

  return (
    <div  >

      <Row gutter={[24, 16]} >
        <Col className="gutter-row" span={18}>
          <Row  >
            <Col className="gutter-row" span={4}>
              <div style={style}>{currentMenuData.label}:</div>
            </Col>

            {/* <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} /> */}

            <Checkbox.Group style={{ width: '80%' }} value={checkedList} onChange={onChangeCheck} >
              <Row>
                {options.map((r, i) => {
                  return <Col key={r.label} span={4}>
                    <Checkbox disabled={is_inherent ? true : false} className="gutter-row" value={r.value}>{r.label}</Checkbox>
                  </Col>
                })}
              </Row>
            </Checkbox.Group>

          </Row>
        </Col>


        <Col className="gutter-row" span={3}>
          {/* <div style={style}>全选</div> */}
          <Checkbox
            indeterminate={indeterminate}
            onChange={onCheckAllChange}
            checked={checkAll}
            disabled={is_inherent ? true : false}
          >
            全选
          </Checkbox>

        </Col>

      </Row >

      {/* <Button onClick={() => {
        console.log(checkedList)
      }}>提交</Button> */}
    </div >
  )
};

export default CheckboxList;
