import {ProCard, ProForm, ProFormColorPicker, ProFormRadio, ProFormSlider, ProFormSwitch, ProFormText} from "@ant-design/pro-components";
import {useNode} from '@craftjs/core';
import {GetProps, Typography, Tabs} from "antd";
import {Color} from "antd/es/color-picker";
import {FC} from "react";
import {Card} from './card';

type TProps = GetProps<typeof Card>;

export const CardSettings: FC = () => {

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

  const change = (values: TProps) => {
    setProp((props: TProps) => {
      // console.log(props, values);
      Object.assign(props, {
        ...props,
        ...values,
      })
      // 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 common = {
    collapsible: true,
    defaultCollapsed: true,
    style: {
      borderTop: '1px solid #ddd',
      borderRadius: 0,
      background: 'rgb(241 241 241 / 20%)'
    },
    headStyle: {
      padding: '6px 10px',
    },
  };

  return (
    <ProForm
      initialValues={dataProps as TProps}
      onValuesChange={(values) => {change(values)}}
      layout="horizontal"
      size="small"
      style={{padding: 16}}
      submitter={{
        render: (props, doms) => {
          return [];
        },
      }}
    >
      <Typography.Title level={3} style={{marginTop: 0}}>Card Settings</Typography.Title>
      <Tabs
        defaultActiveKey="1"
        tabPosition="top"
        items={[
          {
            key: '1',
            label: '属性',
            children: (
              <>
                {/* <ProFormSlider
                  name='paddingInline'
                  label="左右 padding"
                />
                <ProFormSlider
                  name='paddingBlock'
                  label="上下 padding"
                /> */}
                <ProFormText
                  name="title"
                  label="标题"
                />
                <ProFormText
                  name="subTitle"
                  label="副标题"
                />
                <ProFormText
                  name="tooltip"
                  label="提示信息"
                />
                <ProFormRadio.Group
                  name="type"
                  label="卡片类型"
                  options={[
                    {label: 'inner', value: 'inner'},
                    {label: 'default', value: 'default'},
                  ]}
                />
                <ProFormRadio.Group
                  name="size"
                  label="卡片尺寸"
                  options={[
                    {label: 'default', value: 'default'},
                    {label: 'small', value: 'small'},
                  ]}
                />
                <ProFormSwitch
                  name="bordered"
                  label="是否有边框"
                />
                <ProFormSwitch
                  name="boxShadow"
                  label="是否有阴影"
                />
                <ProFormSwitch
                  name="collapsible"
                  label="配置是否可折叠"
                />
                <ProFormSwitch
                  name="defaultCollapsed"
                  label="默认折叠"
                />
                <ProFormSwitch
                  name="openExtra"
                  label="开启右上角自定义区域"
                />
                <ProFormText
                  name={['style', 'width']}
                  label="宽"
                />
              </>
            )
          },
        ]}
      />
    </ProForm>
  )
}

export const cardDefaultProps: TProps = {
  size: 'default',
  type: 'default',
  style: {
    width: '100%'
  },
  paddingInline: 10,
  paddingBlock: 10,
};