import { PlusOutlined} from '@ant-design/icons';
import {ProTable} from '@ant-design/pro-components';
import {Button, Tour} from 'antd';
import {useCallback, useRef} from 'react';
import {useLocation} from 'react-router-dom';
import {useAppDispatch, useAppSelector} from '../../../redux/configureStore.js'
import {selectTouring, selectTourName} from '../../slice/selectors.js'
import {columnsFactory} from '../../../utils/columnsFactory.jsx'
import {ProTableDefault, STATUS_TYPE} from '../../constants.js'
import {selectRoles} from "../MainPage/slice/selectors";
import {getRoles, saveOrUpdateRole} from "../MainPage/slice/thunks";
import {appActions} from "../../slice";

export const RoleManagePage = () => {
  const dispatch = useAppDispatch();
  const actionRef = useRef();
  const {pathname} = useLocation();
  const touring = useAppSelector(selectTouring);
  const tourName = useAppSelector(selectTourName);
  const roleList = useAppSelector(selectRoles);

  /** 导游逻辑 */
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  const closeTouring = useCallback(()=>{
    // console.log(1123)
    dispatch(appActions.startTour(false))
  },[])
  const steps = [
    {
      title: '查询面板',
      description: '这是一个用于角色管理的查询、编辑、新增组件',
      target: () => ref1.current,
    },
    {
      title: '创建角色',
      description: '点击创建按钮,会在表格中生产一行创建表单',
      target: () => ref2.current,
    },
  ];

  const columns = columnsFactory({
    onEditRow:true,
    dataSource:[
      {
        title: '角色名称',
        dataIndex: 'name',
      },
      {
        title: '状态',
        dataIndex: 'status',
        valueType: 'select',
        valueEnum: STATUS_TYPE
      }
    ]
  })

  return (
    <>
      <Tour open={tourName === pathname && touring} onClose={closeTouring} steps={steps}/>
      <div ref={ref1}>
        <ProTable
          {...ProTableDefault}
          rowKey="key"
          headerTitle="角色列表"
          actionRef={actionRef}
          columns={columns}
          request={async (params) =>
            await dispatch(getRoles({params}))
          }
          dataSource={roleList}
          editable={{
            type: 'multiple',
            onSave: async (rowKey, params, row) => {
              const newObj = JSON.stringify(params)
              const oldObj = JSON.stringify(row)
              if (newObj !== oldObj) {
                await dispatch(
                  saveOrUpdateRole({
                    params,
                    resolve: () => {
                      dispatch(getRoles({params}))
                    },
                  })
                )
              }
            },
            onDelete:async (rowKey, data) => {
              console.log(data)
            }
          }}
          pagination={{
            pageSize: 5,
            onChange: (page) => console.log(page),
          }}
          toolBarRender={() => [
            <Button
              ref={ref2}
              key="button"
              icon={<PlusOutlined/>}
              onClick={() => {
                actionRef.current?.addEditRecord?.(
                  {key: (Math.random() * 1000000).toFixed(0)},
                  {position: "top"}
                )
              }}
              type="primary"
            >
              新建
            </Button>,
          ]}
        />
      </div>
    </>
  );
};
