import {ProCard, ProForm, ProFormColorPicker, ProFormRadio, ProFormSelect, 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";

type TProps = GetProps<JSX.IntrinsicElements['div']>;

export const LayoutSettings: 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, {
        ...values,
        style: {
          ...props.style,
          ...values.style,
        },
      })
      // 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}
      onValuesChange={(values) => {change(values)}}
      layout="horizontal"
      size="small"
      style={{padding: 16}}
      submitter={{
        render: (props, doms) => {
          return [];
        },
      }}
    >
      <Typography.Title level={3} style={{marginTop: 0}}>Layout Settings</Typography.Title>
      <Tabs
        defaultActiveKey="1"
        tabPosition="top"
        items={[
          {
            key: '1',
            label: '属性',
            children: (
              <>
                <ProFormSlider
                  name={['style', 'paddingInline']}
                  label="左右 padding"
                />
                <ProFormSlider
                  name={['style', 'paddingBlock']}
                  label="上下 padding"
                />
                <ProFormSlider
                  name={['style', 'marginInline']}
                  label="左右 margin"
                />
                <ProFormSlider
                  name={['style', 'marginBlock']}
                  label="上下 margin"
                />
                <ProFormSwitch
                  name="childDivBlock"
                  label="子级元素撑满"
                />
                <ProFormSelect
                  name={['style', 'flexDirection']}
                  label="排列方向"
                  allowClear={false}
                  options={[
                    {label: '行', value: 'row'},
                    {label: '列', value: 'column'},
                    {label: '行(颠倒)', value: 'row-reverse'},
                    {label: '列(颠倒)', value: 'column-reverse'},
                  ]}
                />
                <ProFormSelect
                  name={['style', 'flexWrap']}
                  label="换行"
                  allowClear={false}
                  options={[
                    {label: '换行', value: 'wrap'},
                    {label: '换行(颠倒)', value: 'wrap-reverse'},
                    {label: '不换行', value: 'nowrap'},
                  ]}
                />
                <ProFormSlider
                  name={['style', 'gap']}
                  label="间隔"
                />
                <ProFormSelect
                  name={['style', 'justifyContent']}
                  label="主轴对齐"
                  allowClear={false}
                  options={[
                    {label: 'center', value: 'center'},
                    {label: 'flex-start', value: 'flex-start'},
                    {label: 'flex-end', value: 'flex-end'},
                    {label: 'space-between', value: 'space-between'},
                  ]}
                />
                <ProFormSelect
                  name={['style', 'alignItems']}
                  label="交叉轴对齐"
                  allowClear={false}
                  options={[
                    {label: 'center', value: 'center'},
                    {label: 'flex-start', value: 'flex-start'},
                    {label: 'flex-end', value: 'flex-end'},
                  ]}
                />
                <ProFormText
                  name={['style', 'width']}
                  label="宽"
                />
                <ProFormColorPicker
                  name={['style', 'background']}
                  label="背景色"
                  getValueFromEvent={(value: Color) => value?.toHexString?.() || value}
                  allowClear
                />
              </>
            )
          },
        ]}
      />
    </ProForm>
  )
}

export const layoutDefaultProps: TProps = {
  style: {
    display: 'flex',
    flexWrap: 'wrap',
    background: 'rgba(22, 119, 255, 0.3)',
    paddingBlock: 10,
    paddingInline: 10,
    gap: 10,
    alignItems: 'center',
    justifyContent: 'flex-start',
    width: '100%',
    boxSizing: 'border-box',
    flexDirection: 'row'
  }
};