import * as React from 'react';
import { Field } from '@alife/cn-ui';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import {
  OPDialog,
  OPButton,
  OPForm,
  OPSowingWall,
  OPTable,
} from '../../src/index';

const { useState } = React;

export default {
  title: '组件/反馈/OPDialog',
  component: OPDialog,
} as ComponentMeta<typeof OPDialog>;

export const 弹窗: ComponentStory<typeof OPDialog> = (): JSX.Element => {
  const [visible, setVisible] = useState(false);
  const [subtitleVisible, setSubtitleVisible] = useState(false);
  const [iconVisible, setIconVisible] = useState(false);
  const [noFooter, setNoFooter] = useState(false);
  const [cancelType, setCancelType] = useState(false);
  const [footerSort, setFooterSort] = useState(false);
  const [customeFooter, setCustomeFooter] = useState(false);
  const [customeHotKey, setCustomeHotKey] = useState(false);

  const openDialog = () => setVisible(true);
  const closeDialog = () => setVisible(false);
  const openDialogSubtitle = () => setSubtitleVisible(true);
  const closeDialogSubtitle = () => setSubtitleVisible(false);
  const openDialogIcon = () => setIconVisible(true);
  const closeDialogIcon = () => setIconVisible(false);
  const openDialogNoFooter = () => setNoFooter(true);
  const closeDialogNoFooter = () => setNoFooter(false);
  const openDialogFooterSort = () => setFooterSort(true);
  const closeDialogFooterSort = () => setFooterSort(false);
  const openDialogCancelType = () => setCancelType(true);
  const closeDialogCancelType = () => setCancelType(false);
  const openDialogCustomeFooter = () => setCustomeFooter(true);
  const closeDialogCustomeFooter = () => setCustomeFooter(false);
  const openDialogCustomHotKey = () => setCustomeHotKey(true);
  const closeDialogCustomHotKey = () => setCustomeHotKey(false);

  const field = Field.useField();

  const handleOk = () => {
    alert('点击了确定');
  };

  const handleOk1 = () => {
    const datepicker = field.getValue('datepicker');
    alert(`你选择了${datepicker}`);
  };

  return (
    <>
      <OPButton onClick={openDialog}>默认</OPButton>
      <OPButton onClick={openDialogSubtitle}>二级标题 & 错误状态</OPButton>
      <OPButton onClick={openDialogIcon}>Icon</OPButton>
      <br />
      <OPButton onClick={openDialogNoFooter}>No Footer</OPButton>
      <OPButton onClick={openDialogFooterSort}>
        确定取消按钮是否存在及如何排列
      </OPButton>
      <OPButton onClick={openDialogCancelType}>引用其他fusion组件</OPButton>
      <OPButton onClick={openDialogCustomeFooter}>自定义footer</OPButton>
      <OPButton onClick={openDialogCustomHotKey}>自定义hotkey</OPButton>

      <OPDialog
        title='测试默认'
        visible={visible}
        onOk={handleOk}
        onCancel={closeDialog}
        okDisabled={true}
        cancelDisabled={false}
      >
        <OPSowingWall
          header={{
            title: '商品播种进度',
            tagList: [
              { children: '面单已打印', type: 'disabled' },
              { children: '警告', type: 'warning' },
            ],
            action: {
              children: '查看进度',
              hotkey: 'F1',
              type: 'text',
              onClick: () => {
                alert(1);
              },
            },
          }}
          sowingWall={{
            baskets: [
              {
                planNum: 1,
                bizUnitId: 160012405356,
                highlighted: true,
                basketNo: 'A1',
                actualNum: 1,
              },
              {
                planNum: 1,
                bizUnitId: 160012405357,
                basketNo: 'A2',
                actualNum: 0,
                status: 'LACK',
              },
              {
                planNum: 1,
                bizUnitId: 160012405358,
                basketNo: 'A3',
                actualNum: 1,
                status: 'FINISHED',
              },
              {
                planNum: 1,
                bizUnitId: 160012405357,
                basketNo: 'A4',
                actualNum: 0,
                status: 'INTERCEPTED',
              },
            ],
            sowingWallCode: 'fx-bzq-0041',
            rows: 3,
            cols: 4,
            onClick: () => {
              alert(2);
            },
          }}
        />
      </OPDialog>
      <OPDialog
        title='我是大标题'
        visible={subtitleVisible}
        subTitle='我是二级标题'
        onOk={handleOk}
        onCancel={closeDialogSubtitle}
        state='error'
      >
        <p>Some Content....</p>
      </OPDialog>
      <OPDialog
        title='测试icon'
        visible={iconVisible}
        onOk={handleOk}
        onCancel={closeDialogIcon}
        icon='notice'
      >
        <p>Some Content....</p>
      </OPDialog>

      <OPDialog
        title='没有footer'
        visible={noFooter}
        onOk={handleOk}
        onCancel={closeDialogNoFooter}
        footer={false}
      >
        <p>Some Content....</p>
      </OPDialog>

      <OPDialog
        title='指定确定按钮和取消按钮是否存在以及如何排列'
        visible={footerSort}
        onOk={handleOk}
        onCancel={closeDialogFooterSort}
        footerActions={['ok']}
        okHotKey=''
      >
        <p>Some Content....</p>
      </OPDialog>

      <OPDialog
        title='引用其他fusion组件'
        visible={cancelType}
        onOk={handleOk1}
        onCancel={closeDialogCancelType}
      >
        <p>Some Content....</p>
        <OPForm
          configs={[
            {
              name: 'datepicker',
              label: '日期',
              type: 'datepicker',
              outputFormat: 'YYYYMMDD',
            },
          ]}
        />
      </OPDialog>

      <OPDialog
        title='自定义footer'
        visible={customeFooter}
        onCancel={closeDialogCustomeFooter}
        loading
        footer={
          <OPButton hotkey='F10' onClick={handleOk}>
            自定义OPButton
          </OPButton>
        }
      >
        <p>Some Content....</p>
      </OPDialog>

      <OPDialog
        title='自定义hotkey'
        visible={customeHotKey}
        onOk={handleOk}
        onCancel={closeDialogCustomHotKey}
        loading
        okHotKey='F9'
      >
        <OPTable
          columns={[
            {
              key: 'waybillNo',
              name: '运单号',
            },
            {
              key: 'basketNo',
              name: '篮号',
            },
            {
              key: 'actualWeight',
              name: '实际重量(g)',
            },
            {
              key: 'theoreticalWeight',
              name: '理论重量(g)',
            },
            {
              key: 'packageStatus',
              name: '包裹状态',
            },
          ]}
          dataSource={[
            {
              actualWeight: 100,
              basketNo: 'A1',
              huId: 29761444111,
              outOrderCode: 'LBX03221312944620404',
              packageStatus: '出库完成',
              theoreticalWeight: 100,
              waybillNo: '611449061568165',
            },
            {
              actualWeight: 100,
              basketNo: 'B1',
              huId: 29761444112,
              outOrderCode: 'LBX03221312944620407',
              packageStatus: '出库完成',
              theoreticalWeight: 100,
              waybillNo: '611449061568221',
            },
            {
              actualWeight: 100,
              basketNo: 'C1',
              huId: 29761444114,
              outOrderCode: 'LBX03221312944620414',
              packageStatus: '出库完成',
              theoreticalWeight: 100,
              waybillNo: '611448576975847',
            },
            {
              actualWeight: 100,
              basketNo: 'B1',
              huId: 29761464094,
              outOrderCode: 'LBX03221312944620403',
              packageStatus: '出库完成',
              theoreticalWeight: 100,
              waybillNo: '611449061568009',
            },
            {
              actualWeight: 100,
              basketNo: 'B1',
              huId: 29761464139,
              outOrderCode: 'LBX03221312951511494',
              packageStatus: '出库完成',
              theoreticalWeight: 100,
              waybillNo: '611449061571810',
            },
            {
              actualWeight: 100,
              basketNo: 'C1',
              huId: 29761500103,
              outOrderCode: 'LBX03221312944620412',
              packageStatus: '出库完成',
              theoreticalWeight: 100,
              waybillNo: '611449061568433',
            },
            {
              actualWeight: 100,
              basketNo: 'A1',
              huId: 29761500104,
              outOrderCode: 'LBX03221312944620406',
              packageStatus: '出库完成',
              theoreticalWeight: 100,
              waybillNo: '611448576975635',
            },
            {
              actualWeight: 100,
              basketNo: 'C1',
              huId: 29761500176,
              outOrderCode: 'LBX03221312951511498',
              packageStatus: '出库完成',
              theoreticalWeight: 100,
              waybillNo: '611448576978924',
            },
            {
              actualWeight: 100,
              basketNo: 'C1',
              huId: 29777560941,
              outOrderCode: 'LBX03221312951511495',
              packageStatus: '出库完成',
              theoreticalWeight: 100,
              waybillNo: '611449356529995',
            },
            {
              actualWeight: 100,
              basketNo: 'A1',
              huId: 29777952414,
              outOrderCode: 'LBX03221312951511488',
              packageStatus: '出库完成',
              theoreticalWeight: 100,
              waybillNo: '611449368870253',
            },
            {
              actualWeight: 100,
              basketNo: 'B1',
              huId: 29785033579,
              outOrderCode: 'LBX03221312951511491',
              packageStatus: '出库完成',
              theoreticalWeight: 100,
              waybillNo: '611449358390440',
            },
            {
              actualWeight: 100,
              basketNo: 'A1',
              huId: 29800698065,
              outOrderCode: 'LBX03221312951511493',
              packageStatus: '出库完成',
              theoreticalWeight: 100,
              waybillNo: '611449368870309',
            },
          ]}
          pagination={{
            enabled: true,
            pageSize: 20,
            currentPage: 1,
            pageSizeList: [20, 50, 100],
            total: 100,
          }}
        />
      </OPDialog>
    </>
  );
};