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} from "@ant-design/pro-components";
import styled from 'styled-components';
import {ActionButtons} from "./action-buttons";


type TActionButtonsProps = GetProps<typeof ActionButtons>;

export const ActionButtonsSettings: FC<{isRenderContent?: boolean, rootKey?: string | string[]}> = ({isRenderContent, rootKey = 'fieldsConfig'}) => {

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

  const change = (values: TActionButtonsProps) => {
    // console.log(values);
    setProp((props: TActionButtonsProps) => {
      Object.keys(values).forEach((key) => {
        const typedKey = key as keyof TActionButtonsProps;
        // eslint-disable-next-line no-param-reassign
        props[typedKey] = values[typedKey] as never;
      })
    })
  };

  const commonButtonFields = () => {
    return [
      <ProFormSelect
        key="buttonProps-type"
        name={['buttonProps', 'type']}
        label="设置按钮类型"
        options={[
          {label: 'primary', value: 'primary'},
          {label: 'dashed', value: 'dashed'},
          {label: 'link', value: 'link'},
          {label: 'text', value: 'text'},
          {label: 'default', value: 'default'},
        ]}
      />,
      <ProFormSwitch
        key="buttonProps-block"
        name={['buttonProps', 'block']}
        label="按钮宽度占满父元素"
      />,
      <ProFormSelect
        key="buttonProps-variant"
        name={['buttonProps', 'variant']}
        label="按钮变体(需要配合按钮颜色)"
        options={[
          {value: 'outlined', label: 'outlined'},
          {value: 'dashed', label: 'dashed'},
          {value: 'solid', label: 'solid'},
          {value: 'filled', label: 'filled'},
          {value: 'text', label: 'text'},
          {value: 'link', label: 'link'},
        ]}
      />,
      <ProFormSelect
        key="buttonProps-color"
        name={['buttonProps', 'color']}
        label="按钮颜色(需要配合按钮变体)"
        options={[
          {value: 'default', label: 'default'},
          {value: 'primary', label: 'primary'},
          {value: 'danger', label: 'danger'},
          {value: 'blue', label: 'blue'},
          {value: 'purple', label: 'purple'},
          {value: 'cyan', label: 'cyan'},
          {value: 'green', label: 'green'},
          {value: 'magenta', label: 'magenta'},
          {value: 'pink', label: 'pink'},
          {value: 'red', label: 'red'},
          {value: 'orange', label: 'orange'},
          {value: 'yellow', label: 'yellow'},
          {value: 'volcano', label: 'volcano'},
          {value: 'geekblue', label: 'geekblue'},
          {value: 'lime', label: 'lime'},
          {value: 'gold', label: 'gold'},
        ]}
      />,
      <ProFormSwitch
        key="buttonProps-danger"
        name={['buttonProps', 'danger']}
        label="危险按钮"
      />,
      <ProFormSwitch
        key="buttonProps-disabled"
        name={['buttonProps', 'disabled']}
        label="禁用按钮"
      />,
      <ProFormSwitch
        key="buttonProps-ghost"
        name={['buttonProps', 'ghost']}
        label="幽灵按钮"
      />,
      <ProFormSelect
        key="buttonProps-shape"
        name={['buttonProps', 'shape']}
        label="按钮形状"
        options={[
          {value: 'default', label: 'default'},
          {value: 'circle', label: 'circle'},
          {value: 'round', label: 'round'},
        ]}
      />,
      <ProFormSelect
        key="buttonProps-size"
        name={['buttonProps', 'size']}
        label="按钮大小"
        options={[
          {value: 'large', label: 'large'},
          {value: 'middle', label: 'middle'},
          {value: 'small', label: 'small'},
        ]}
      />,
      // <ProFormText
      //   key="buttonProps-href"
      //   name={['buttonProps', 'href']}
      //   label="按钮链接地址"
      // />,
      // <ProFormText
      //   key="buttonProps-target"
      //   name={['buttonProps', 'target']}
      //   label="链接打开方式（target）"
      // />,
    ]
  }

  const commonBaseFields = () => (
    <ProFormList
      name="items"
      label=""
      creatorButtonProps={{
        creatorButtonText: '添加按钮项',
        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>
        )
      }}
    >
      {() => [
        <CustomTabsStyle height="50vh">
          <Tabs
            defaultActiveKey="1"
            tabPosition="top"
            items={[
              {
                key: '1',
                label: '属性',
                children: (
                  <>
                    <ProFormText
                      key="items-label"
                      name="label"
                      label="按钮文案"
                      rules={[{required: true}]}
                    />
                    <ProFormText
                      key="items-value"
                      name="value"
                      label="唯一key"
                      rules={[{required: true}]}
                    />
                    {/* action?: 'confirm' | 'modal-form' | 'modal-search' | 'custom'; */}
                    <ProFormSelect
                      key="items-action"
                      name="action"
                      label="动作类型(需在容器中使用)"
                      rules={[{required: true}]}
                      options={[
                        {type: 'confirm', value: 'confirm'},
                        {type: 'modal', value: 'modal'},
                      ]}
                    />
                    <ProFormDependency name={['action']}>
                      {(data) => (
                        <Tabs
                          activeKey={data.action || ''}
                          items={[
                            {
                              key: 'confirm',
                              label: 'confirm',
                              disabled: true,
                              children: (
                                <>
                                  <ProFormText
                                    key="items-confirmTitle"
                                    name="confirmTitle"
                                    label="标题内容"
                                  />
                                  <ProFormText
                                    key="items-confirmContent"
                                    name="confirmContent"
                                    label="文本内容"
                                  />
                                  <ProFormText
                                    key="items-api"
                                    name="api"
                                    label="提交接口"
                                    placeholder="/api/confirm"
                                    rules={[{required: true}]}
                                  />
                                </>
                              )
                            }
                          ]}
                        />
                      )}
                    </ProFormDependency>
                    <ProFormList
                      name="filter"
                      label=""
                      creatorButtonProps={{
                        creatorButtonText: '添加显示条件(默认显示)',
                        position: "bottom",
                        style: {marginTop: 10}
                      }}
                      itemRender={({listDom, action}, {index: subFilterIndex}) => {

                        return (
                          <ProCard
                            size="small"
                            title={`规则 ${subFilterIndex + 1}`}
                            extra={action}
                            style={{
                              borderTop: '1px solid #ddd',
                              borderRadius: 0,
                              background: 'rgb(241 241 241 / 20%)'
                            }}
                            headStyle={{
                              padding: '6px 10px',
                            }}
                          >
                            <RulesDiv>
                              {listDom}
                            </RulesDiv>
                          </ProCard>
                        )
                      }}
                    >
                      {() => [
                        <ProFormText
                          key="original"
                          name="original"
                          label="数据源key"
                          rules={[{required: true}]}
                        />,
                        <ProFormSelect
                          key="op"
                          name="op"
                          label="判断类型"
                          rules={[{required: true}]}
                          options={[
                            /**
                             * - eq 等于
                             * - gt 大于[数据源大于target]
                             * - lt 小于[数据源小于target]
                             * - in 包含[支持数组 `['qwe_asd'].includes('qwe_asd')`, 字符串 `'qwe_asd'.includes('qwe_')`]
                             * - notIn 不包含[支持数组 `!['qwe_asd'].includes('qwe_asd')`, 字符串 `!'qwe_asd'.includes('qwe_')`]
                             * - empty 空
                             * - notEmpty 非空
                             */
                            {value: 'eq', label: '等于'},
                            {value: 'gt', label: '大于'},
                            {value: 'lt', label: '小于'},
                            {value: 'in', label: '包含'},
                            {value: 'notIn', label: '不包含'},
                            {value: 'empty', label: '空'},
                            {value: 'notEmpty', label: '非空'},
                          ]}
                        />,
                        <ProFormText
                          key="target"
                          name="target"
                          label="匹配数据值"
                          rules={[{required: true}]}
                          getValueFromEvent={(e) => {
                            const {value} = e.target;
                            if (value === '' || value === undefined || value === null) return value;
                            return Number.isNaN(+value) ? value : +value;
                          }}
                        />,
                      ]}
                    </ProFormList>
                  </>
                )
              },
              {
                key: '2',
                label: '按钮属性(button_items 适用)',
                children: <>{commonButtonFields()}</>,
              }
            ]}
          />
        </CustomTabsStyle>,
      ]}
    </ProFormList>
  );

  const content = () => {

    const attrChildrenContent = (
      <>
        <ProFormList
          name={rootKey}
          label=""
          creatorButtonProps={{
            creatorButtonText: '添加按钮组',
            position: "bottom",
            style: {marginTop: 10}
          }}
          itemRender={({listDom, action}, {index}) => (
            <ProFormDependency name={['label']}>
              {(data) => (
                <ProCard
                  size="small"
                  key={index}
                  collapsible
                  defaultCollapsed
                  // style={{marginBlockEnd: 8}}
                  title={data.label ? `${data.label}` : `按钮组 ${index + 1}`}
                  extra={action}
                  // bodyStyle={{paddingBlockEnd: 0}}
                  style={{
                    borderBottom: '1px solid #ddd',
                    borderRadius: 0,
                    background: 'rgb(241 241 241 / 20%)'
                  }}
                  headStyle={{
                    padding: 10,
                  }}
                >
                  {listDom}
                </ProCard>
              )}
            </ProFormDependency>
          )}
        >
          {(meta, index) => [
            <Tabs
              defaultActiveKey="1"
              tabPosition="top"
              items={[
                {
                  key: '1',
                  label: '属性',
                  children: (
                    <>
                      <ProFormSelect
                        key="type"
                        name="type"
                        label="组类型"
                        rules={[{required: true}]}
                        options={[
                          {value: 'button_items', label: 'button_items'},
                          {value: 'button_group', label: 'button_group'},
                        ]}
                      />
                      <ProFormText
                        key="label"
                        name="label"
                        label="label(button_group 需要)"
                      />
                      <ProFormDependency key="items" name={['type']}>
                        {(data) => {

                          if (!data.type) return <></>

                          return commonBaseFields();
                        }}
                      </ProFormDependency>
                    </>
                  )
                },
                {
                  key: '2',
                  label: '按钮属性(button_group 适用)',
                  children: <>{commonButtonFields()}</>,
                }
              ]}
            />,
          ]}
        </ProFormList>
      </>
    );

    if (isRenderContent) {
      return attrChildrenContent;
    }

    return (
      <Tabs
        defaultActiveKey="1"
        tabPosition="top"
        style={{}}
        tabBarExtraContent={{
          right: (
            <Button
              htmlType="submit"
              type="primary"
              key="edit"
              onClick={() => {
                form.validateFields().catch(() => {
                  message.warning('配置设置失败,请注意');
                })
              }}
            >
              提交
            </Button>
          )
        }}
        items={[
          {
            key: '1',
            label: '属性',
            children: attrChildrenContent
          },
        ]}
      />
    );
  };

  if (isRenderContent) return content();

  return (
    <ProForm
      initialValues={dataProps as TActionButtonsProps}
      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}}>Layout Settings</Typography.Title>
      {content()}
    </ProForm>
  )
}

export const defaultActionButtonsProps: TActionButtonsProps = {
  fieldsConfig: [
    {
      type: 'button_group',
      buttonProps: {},
      items: [
        {label: 'confirm', value: '3', buttonProps: {type: 'primary'}},
        {label: 'modal', value: '4', action: 'modal'},
      ],
    },
  ]
};

const RulesDiv = styled.div`
  .ant-pro-form-list-container {
    display: flex;
    gap: 10px;
  }

  .ant-form-item {
    flex: 1;
    margin-bottom: 0;
  }
`;

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