import React, { useState, useEffect } from 'react';
import { Checkbox, Card, Button, notification, Modal } from 'antd';
import { fetch, apis } from '../../../utils/request';

const getModules = fetch(apis.member.menus);
const authorizeMenus = fetch(apis.member.authorize);

const gridStyle = {
  width: '25%',
  textAlign: 'center',
};

const Menus = (props) => {
  const [menus, setMenus] = useState([])
  const [checkOpts, setCheckOptions] = useState({checkedList: [], indeterminate: true, checkAll: false})

  const user = props.data || {}

  useEffect(() => {
    if (user && user.userId) {
      getModules({ params: {userId: user.userId} }).then((list) => {
        let checkedList = []
        const modules = (list || []).map(item => {
          if (item.hasRights) {
            checkedList.push(item.menuId)
          }
  
          return {
            label: item.name,
            value: item.menuId,
          }
        })
  
        setMenus(modules);
        setCheckOptions({
          checkedList,
          indeterminate: !!checkedList.length && checkedList.length < modules.length,
          checkAll: checkedList.length === modules.length
        })
      }).catch(x => x)
    }
  }, [user.userId])

  useEffect(() => {
    Modal.warning({
      title: '权限操作有风险, 请谨慎!',
      onOk() {},
    });
  }, [])

  const handleChange = (checkedList) => {
    setCheckOptions({
      checkedList,
      indeterminate: !!checkedList.length && checkedList.length < menus.length,
      checkAll: checkedList.length === menus.length
    })
  }

  const checkAllChange = (e) => {
    setCheckOptions({
      checkedList: e.target.checked ? menus.map(x => x.value) : [],
      indeterminate: false,
      checkAll: e.target.checked,
    })
  }

  const CheckAll = (
    <Checkbox
      indeterminate={checkOpts.indeterminate}
      onChange={checkAllChange}
      checked={checkOpts.checkAll}
    > 全选 </Checkbox>
  )

  const handleSubmit = () => {
    const data = {
      userId: user.userId,
      menus: checkOpts.checkedList
    }

    if (!data.menus || !data.menus.length) {
      Modal.warning({
        title: '操作非法',
        content: '如果您要取消所有授权, 请进行账号关闭来实现相同的目的',
        onOk() {},
      });
      return
    }

    authorizeMenus({ data }).then(() => {
      notification.success({ message: '更新授权成功' })
    }).catch(x => x)
  }

  const handleCancel = () => {
    if (typeof props.onCancel === 'function') {
      props.onCancel()
    }
  }

  return (
    <div>
      <Card title="开通权限" extra={CheckAll} bordered={false}>
        <Checkbox.Group
          value={checkOpts.checkedList}
          onChange={handleChange}
        >
          {menus.map((menu, inx) => {
            return (
              <Card.Grid hoverable={false} style={gridStyle} key={inx}>
                <Checkbox value={menu.value}>{menu.label}</Checkbox>
              </Card.Grid>
            )
          })}
        </Checkbox.Group>
      </Card>
      <div style={{ padding: '36px 100px' }}>
        <Button type="primary" onClick={handleSubmit}>提交</Button>
        <Button style={{ marginLeft: '36px' }} onClick={handleCancel}>取消</Button>
      </div>
    </div>
  );
}

export default Menus;
