import React, {FC} from "react";
import {useNode} from '@craftjs/core';
import {Button, GetProps, Popover, Typography, Tabs, message} from "antd";
import {ProCard, ProForm, ProFormDependency, ProFormSwitch, ProFormList, ProFormRadio, ProFormSelect, ProFormText, ProFormDigit} from "@ant-design/pro-components";
import styled from 'styled-components';
import {TabRadio} from "./tab-radio";


type TProps = GetProps<typeof TabRadio>;

export const TabRadioSettings = () => {

  const [form] = ProForm.useForm();
  const {actions: {setProp}, ...dataProps} = useNode<TProps>((node) => ({
    ...node.data.props
  }));
  // console.log(dataProps);

  const change = (values: TProps) => {
    // console.log(values);
    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;
      })
    })
  };

  return (
    <ProForm
      initialValues={dataProps as TProps}
      layout="horizontal"
      size="small"
      form={form}
      style={{padding: 16}}
      onFinish={(values) => {change(values)}}
      // onError={() => {
      //   message.warning('配置设置失败,请注意');
      // }}
      submitter={{
        render: (props, doms) => {
          return [];
        },
      }}
    >
      <Typography.Title level={3} style={{marginTop: 0}}>TabRadio Settings</Typography.Title>
      {/* <CustomTabsStyle height="50vh"> */}
      <Tabs
        defaultActiveKey="1"
        tabPosition="top"
        items={[
          {
            key: '1',
            label: '属性',
            children: (
              <>
                <ProFormText
                  key="fieldKey"
                  name="fieldKey"
                  label="接口属性key"
                  rules={[{required: true}]}
                />
                <ProFormSwitch
                  key="animated"
                  name="animated"
                  label="是否使用动画切换 Tabs"
                />
                <ProFormSwitch
                  key="centered"
                  name="centered"
                  label="标签居中展示"
                />
                <ProFormText
                  key="defaultActiveKey"
                  name="defaultActiveKey"
                  label="初始化选中面板的 key"
                />
                <ProFormSelect
                  key="size"
                  name="size"
                  label="大小"
                  options={[
                    {value: 'large', label: 'large'},
                    {value: 'middle', label: 'middle'},
                    {value: 'small', label: 'small'},
                  ]}
                />
                <ProFormDigit
                  key="tabBarGutter"
                  name="tabBarGutter"
                  label="tabs 之间的间隙"
                />
                <ProFormText
                  key="marginBottom"
                  name="marginBottom"
                  label="tabs 下边距"
                  getValueFromEvent={(e) => {
                    const {value} = e.target;
                    if (value === '' || value === undefined || value === null) return value;
                    return Number.isNaN(+value) ? value : +value;
                  }}
                />
                <ProFormSelect
                  key="tabPosition"
                  name="tabPosition"
                  label="页签位置"
                  options={[
                    {value: 'top', label: 'top'},
                    {value: 'right', label: 'right'},
                    {value: 'bottom', label: 'bottom'},
                    {value: 'left', label: 'left'},
                  ]}
                />
                <ProFormSelect
                  key="type"
                  name="type"
                  label="页签的基本样式"
                  options={[
                    {value: 'line', label: 'line'},
                    {value: 'card', label: 'card'},
                    // {value: 'editable-card', label: 'editable-card'},
                  ]}
                />
              </>
            )
          },
          {
            key: '2',
            label: 'tab项配置',
            children: (
              <>
                <ProFormList
                  name="items"
                  label=""
                  creatorButtonProps={{
                    creatorButtonText: '添加Tab项',
                    position: "bottom",
                    style: {marginTop: 10}
                  }}
                  itemRender={({listDom, action}, {index: subIndex}) => {

                    return (
                      <ProFormDependency name={['label']}>
                        {(data) => (
                          <Popover
                            key={`items-popover-${subIndex}`}
                            content={listDom}
                            trigger="click"
                            placement="left"
                            fresh
                            styles={{
                              body: {
                                width: '500px'
                              }
                            }}
                          >
                            <ProCard
                              size="small"
                              defaultCollapsed
                              title={(
                                <>
                                  <span>{data.label ? `${data.label}` : `按钮 ${subIndex + 1}`}</span>
                                  <sub style={{fontSize: 10, paddingLeft: 2, color: 'gray', verticalAlign: 'baseline'}}>(点击编辑)</sub>
                                </>
                              )}
                              extra={action}
                              style={{
                                borderTop: '1px solid #ddd',
                                borderRadius: 0,
                                background: 'rgb(241 241 241 / 20%)'
                              }}
                              headStyle={{
                                padding: '6px 10px',
                              }}
                              bodyStyle={{
                                display: 'none'
                              }}
                            />
                          </Popover>
                        )}
                      </ProFormDependency>
                    )
                  }}
                >
                  {() => [
                    <ProFormText
                      key="items-label"
                      name="label"
                      label="选项卡头显示文字"
                      rules={[{required: true}]}
                    />,
                    <ProFormText
                      key="items-key"
                      name="key"
                      label="唯一 key"
                      rules={[{required: true}]}
                    />,
                    <ProFormSwitch
                      key="items-disabled"
                      name="disabled"
                      label="禁用该项"
                    />,
                  ]}
                </ProFormList>
              </>
            ),
          }
        ]}
        tabBarExtraContent={{
          right: (
            <Button
              htmlType="submit"
              type="primary"
              key="edit"
              onClick={() => {
                form.validateFields().catch(() => {
                  message.warning('配置设置失败,请注意');
                })
              }}
            >
              提交
            </Button>
          )
        }}
      />
      {/* </CustomTabsStyle> */}
    </ProForm>
  )
}

export const tabRadioDefaultProps: TProps = {
  items: [
    {
      key: '1',
      label: 'Tab 1',
    },
    {
      key: '2',
      label: 'Tab 2',
    },
    {
      key: '3',
      label: 'Tab 3',
    },
  ],
  size: 'small',
  tabBarGutter: 0,
  tabPosition: 'top',
  type: 'card',
  animated: true,
  marginBottom: 10,
  fieldKey: 'fieldKey',
};

const CustomTabsStyle = styled.div<{height: string}>`
  .ant-tabs-tabpane {
    max-height: ${(props) => props.height};
    overflow: auto;
  }
`;