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

const { useState, useCallback } = React;

export default {
  title: '组件/数据录入/OPForm',
  component: OPForm,
} as ComponentMeta<typeof OPForm>;

const Form: ComponentStory<typeof OPForm> = (args): JSX.Element => {
  const [jsonValues, setJsonValues] = useState(null);

  const field = Field.useField({
    values: {
      opswitch: true,
    },
  });

  const onSubmit = () => {
    field.validate((errors, values) => {
      setJsonValues(JSON.stringify(values));
    });
  };

  const customInput = useCallback((props) => {
    return <OPNumber {...props} />;
  }, []);

  return (
    <div style={{ padding: '25px', backgroundColor: '#EEF4FA' }}>
      <h1>布局 - 横排/多列</h1>
      <OPForm
        field={field}
        formItemLayout={{
          labelCol: {
            span: 6,
          },
          wrapperCol: {
            span: 18,
          },
        }}
        columnNumber={2}
        configs={[
          {
            type: 'input',
            name: 'input',
            label: '输入框',
            required: true,
            placeholder: '请输入',
          },
          {
            type: 'select',
            name: 'select',
            label: '选择框',
            dataSource: [
              { value: 1, label: '选择1' },
              { value: 2, label: '选择2' },
            ],
          },
          {
            type: 'number',
            name: 'number',
            label: '数字框',
          },
          {
            type: 'radio',
            name: 'radio',
            label: '单选框',
            dataSource: [
              { value: 1, label: '单选1' },
              { value: 2, label: '单选2' },
            ],
          },
          {
            type: 'checkbox',
            name: 'checkbox',
            label: '复选框',
            dataSource: [
              { value: 1, label: '复选1' },
              { value: 2, label: '复选2' },
            ],
          },
          {
            type: 'switch',
            name: 'switch',
            label: '开关',
          },
          {
            type: 'datepicker',
            name: 'datepicker',
            label: '日期',
            outputFormat: 'YYYY-MM-DD',
          },
          {
            type: 'daterangepicker',
            name: 'daterangepicker',
            label: '日期区间',
            outputFormat: 'YYYY-MM-DD',
          },
          {
            type: 'textarea',
            name: 'textarea',
            label: '多行文本',
            placeholder: '请输入',
            span: 24,
            labelCol: {
              span: 3,
            },
            wrapperCol: {
              span: 21,
            },
          },
          {
            type: 'render',
            name: 'render',
            label: '自定义',
            render: customInput,
          },
        ]}
      />
      <OPButton type='primary' size='small' onClick={onSubmit}>
        提交
      </OPButton>
      <p>{jsonValues}</p>
      <h1>布局 - 竖排/单列</h1>
      <OPForm
        field={field}
        configs={[
          {
            type: 'input',
            name: 'input',
            label: '输入框',
            required: true,
            placeholder: '请输入',
          },
          {
            type: 'select',
            name: 'select',
            label: '选择框',
            dataSource: [
              { value: 1, label: '选择1' },
              { value: 2, label: '选择2' },
            ],
          },
        ]}
      />
    </div>
  );
};

export const 表单 = Form.bind({});