import {useNode} from "@craftjs/core";
import {Button, Collapse, GetProps, Tabs, Typography} from 'antd';
import {ProForm, ProFormList, ProFormSelect, ProCard, ProFormText} from '@ant-design/pro-components';
import {SetingtabsStyle} from "./style";
import {getFieldSettings} from "./modules/field-settings";
import {Form} from './form';

type TProps = GetProps<typeof Form>;

export const FormSettings = () => {
  const {actions: {setProp}, ...dataProps} = useNode<TProps>((node) => ({
    ...node.data.props
  }));

  const change = (values: TProps) => {
    setProp((props: TProps) => {

      Object.keys(values).forEach((key) => {

        const typedKey = key as keyof TProps;
        // eslint-disable-next-line no-param-reassign
        props[typedKey] = values[typedKey] as never;
      })

    })
  };

  const collapseItems = Array.from(
    [
      {
        key: '1',
        label: '数据源',
        children: (
          <ProForm
            layout="horizontal"
            initialValues={dataProps as TProps}
            submitter={false}
            onValuesChange={(values) => change(values)}
          >
            <ProFormText name="formDataUrl" label="初始化接口" />
            <ProFormText name="formSaveUrl" label="保存接口" />

          </ProForm>
        )
      },
      {
        key: '2',
        label: '事件',
        children: (
          <ProForm
            layout="horizontal"
            initialValues={dataProps as TProps}
            submitter={false}
            onValuesChange={(values) => {
              change({
                onEvent: {
                  ...dataProps.onEvent,
                  ...values.onEvent
                }
              })
            }}
          >
            <ProFormSelect
              name={['onEvent', 'actionType']}
              label="提交事件类型"
              options={[
                {value: 'url', label: '跳转链接'},
                {value: 'refresh', label: '刷新页面'},
                {value: 'goBack', label: '返回上一页'},
              ]}
            />
            <ProFormText
              name={['onEvent', 'linkUrl']}
              label="链接地址"
              placeholder="请输入跳转链接"
              hidden={dataProps?.onEvent?.actionType !== 'url'}

            />
          </ProForm>
        )
      },
      {
        key: '3',
        label: '字段',
        children: (
          <ProForm
            // layout="horizontal"
            initialValues={dataProps as TProps}
            onFinish={(values) => {change(values)}}
            submitter={{
              render: () => {
                return [
                  <Button htmlType="submit" type="primary" key="edit">
                    提交
                  </Button>
                ];
              },
            }}
          >
            {getFieldSettings()}
          </ProForm>
        )
      }
    ]
  )

  const items = Array.from(
    [
      {
        key: '1',
        label: '外观',
        children: (
          <ProForm
            layout="horizontal"
            initialValues={dataProps as TProps}
            submitter={false}
            onValuesChange={(values) => change(values)}
          >
            <ProFormSelect
              name="layout"
              label="表单布局"
              options={[
                {value: 'horizontal', label: '水平布局'},
                {value: 'vertical', label: '垂直布局'},
                {value: 'inline', label: '内联布局'}
              ]}
            />
            <ProFormSelect
              name="size"
              label="表单尺寸"
              options={[
                {value: 'small', label: 'Small'},
                {value: 'default', label: 'Default'},
                {value: 'large', label: 'Large'}
              ]}
            />
          </ProForm>
        )
      },
      {
        key: '2',
        label: '属性',
        children: (
          <Collapse
            size="small"
            defaultActiveKey={['1']}
            items={collapseItems}
          >
          </Collapse>
        )
      }
    ]
  );

  return (
    <>
      <Typography.Title level={3}>ProForm Settings</Typography.Title>
      <SetingtabsStyle>
        <div className="setting-container">
          <Tabs
            defaultActiveKey="1"
            tabPosition="top"
            items={items}
          />
        </div>
      </SetingtabsStyle>
    </>
  )
};

export const FormDefaultProps: TProps = {
  layout: "horizontal",
  formDataUrl: 'initApi',
  formSaveUrl: 'saveApi',
  onEvent: {
    linkUrl: ''
  },
  initSendOn: true,
  fieldsConfig: [
    {
      field: 'input',
      valueType: 'input',
      label: 'input',
      itemWidth: '30%'
    },
    {
      field: 'select',
      valueType: 'select',
      label: 'select',
      api: 'select',
      options: [
        {
          value: 'wt1',
          label: '问题1问题1问题1问题1问题1问题1问题1',
        },
        {value: 'wt2', label: '问题2'},
        {value: 'wt3', label: '问题3'},
      ],
    },
  ],
};