import { CStringOnlySetter } from 'lowcode/_setters';
import { t } from '../../src/locale';
import snippets from './snippets';
import { uuid } from 'lowcode/_utils/utils';
import flowEventConfig, { getFlowEventConfig } from 'lowcode/_com-props/flowEventConfig';
import componentKey from 'lowcode/_com-props/componentKey';
import componentName from 'lowcode/_com-props/componentName';
import loopData from 'lowcode/_com-props/loopData';

function clamp(value: any, min: any, max: any) {
  return Math.max(min, Math.min(max, value));
}

export default {
  snippets,
  componentName: 'Col',
  "group": t('gridCol.key_Ug4bbm4Hmo7o'),
  title: t('gridCol.key_EpggIT4Hlgh9'),
  props: [
    loopData,
    componentKey,
    componentName,
    {
      name: 'isWalletConnect',
      title: {
        label: t('gridCol.key_CmdPFwsmmH3M'),
        tip: t('gridCol.key_CmdPFwsmmH4M'),
      },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    getFlowEventConfig({
      label: t('gridCol.initEvent'),
      tip: t('gridCol.initEventTip'),
      props: {}
    }),
    getFlowEventConfig({
      name:"clickFlowEvent",
      label:t('gridCol.clickFlowEvent'),
      tip:  t('gridCol.clickFlowEventTip'),
      props: {}
    }),
    // getFlowEventConfig({
    //   name: "mouseDownFlowEvent",
    //   label: t('button.mouseDownFlowEvent'),
    //   tip: t('button.mouseDownFlowEventTip'),
    //   props: {}
    // }),
    // getFlowEventConfig({
    //   name: "mouseUpFlowEvent",
    //   label: t('button.mouseUpFlowEvent'),
    //   tip: t('button.mouseUpFlowEventTip'),
    //   props: {}
    // }),
    {
      type: 'field',
      name: 'intervalProps',
      title: t('gridCol.interval'),
      extraProps: {
        display: 'accordion',
        defaultCollapsed: true,
      },
      setter: {
        componentName: 'ObjectSetter',
        display: 'inline',
        props: {
          config: {
            items: [
              {
                type: 'field',
                name: 'visible',
                title: t('gridCol.openInterval'),
                setter: [
                  {
                    componentName: 'BoolSetter',
                    props: {
                      defaultValue: false,
                    },
                  }
                ],
              },
              {
                name: 'count',
                title: t('gridCol.intervalCount'),
                setter: [
                  {
                    componentName: 'NumberSetter',
                    initialValue: 10,
                  }
                ],
                condition: (target: any) => {
                  const intervalProps = target.getProps().getPropValue('intervalProps')
                  return intervalProps?.visible
                }
              },
              {
                name: 'intervalTime',
                title: t('gridCol.intervalTime'),
                setter: [
                  {
                    componentName: 'NumberSetter',
                    initialValue: 10,
                    props: {
                      min: 0,
                    },
                  }
                ],
                condition: (target: any) => {
                  const intervalProps = target.getProps().getPropValue('intervalProps')
                  return intervalProps?.visible
                }
              },
            ],
          },
        },
      },
    },
    {
      name: 'span',
      title: { label: t('gridCol.key_CmdPFwsmmH2M'), tip: t('gridCol.key_oer8yUNFyBKX') },
      propType: 'number',
      setter: {
        componentName: 'NumberSetter',
        props: {
          min: 0,
          max: 24,
        },
      },
    },
    {
      name: 'styleWebOS',
      title: { label: t('gridRow.key_FAr6jUiyP7z4'), tip: t('gridRow.key_tcUnf2iinPgb') },
      propType: 'bool',
      setter: "BoolSetter",
      defaultValue: false,
    },
    {
      name: 'order',
      title: { label: t('gridCol.key_DjbFmC3PvZTb'), tip: t('gridCol.key_Ff6CphCili5D') },
      propType: 'number',
    },
    {
      name: 'pull',
      title: { label: t('gridCol.key_xkSKhlN1OqTM'), tip: t('gridCol.key_2JhdSMXJEd81') },
      propType: 'number',
      setter: {
        componentName: 'NumberSetter',
        props: {
          min: 0,
          max: 24,
        },
      },
    },
    {
      name: 'push',
      title: { label: t('gridCol.key_Un3VvXJIQ7Sb'), tip: t('gridCol.key_Jx65HJ4qIYPz') },
      propType: 'number',
      setter: {
        componentName: 'NumberSetter',
        props: {
          min: 0,
          max: 24,
        },
      },
    },
    {
      title: t('gridCol.buttonStatus'),
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'hoverStyle',
          title: t('button.hoverStyle'),
          type: 'group',
          extraProps: {
            display: 'entry',
          },
          items: [
            {
              name: 'hoverStyle',
              title: {
                label: t('button.hoverStyle'),
                tip: t('button.hoverStyleTip'),
              },
              setter: 'CStyleSetter',
              extraProps: {
                display: 'block',
              },
            },
          ],
        },
        {
          name: 'clickStyle',
          title: t('button.clickStyle'),
          type: 'group',
          extraProps: {
            display: 'entry',
          },
          items: [
            {
              name: 'clickStyle',
              title: {
                label: t('button.clickStyle'),
                tip: t('button.clickStyleTip'),
              },
              setter: 'CStyleSetter',
              extraProps: {
                display: 'block',
              },
            },
          ],
        },
        {
          name: 'selectStyle',
          title: t('button.selectStyle'),
          type: 'group',
          extraProps: {
            display: 'entry',
          },
          items: [
            {
              name: 'selectStyle',
              title: {
                label: t('button.selectStyle'),
                tip: t('button.selectStyleTip'),
              },
              setter: 'CStyleSetter',
              extraProps: {
                display: 'block',
              },
            },
          ],
        },
        {
          name: 'loadingStyle',
          title: t('button.loadingStyle'),
          type: 'group',
          extraProps: {
            display: 'entry',
          },
          items: [
            {
              name: 'loadingStyle',
              title: {
                label: t('button.loadingStyle'),
                tip: t('button.loadingStyleTip'),
              },
              setter: 'CStyleSetter',
              extraProps: {
                display: 'block',
              },
            },
          ],
        },
        {
          name: 'errorStyle',
          title: t('button.errorStyle'),
          type: 'group',
          extraProps: {
            display: 'entry',
          },
          items: [
            {
              name: 'errorStyle',
              title: {
                label: t('button.errorStyle'),
                tip: t('button.errorStyleTip'),
              },
              setter: 'CStyleSetter',
              extraProps: {
                display: 'block',
              },
            },
          ],
        },
      ],
    },
  ],
  configure: {
    component: { isContainer: true, nestingRule: { parentWhitelist: ['Row'] } },
    supports: {
      events: false,
      style: true,
      "loop": false,
      "condition": false
    },
    advanced: {
      getResizingHandlers: () => {
        return ['e'];
      },
      callbacks: {
        onResizeStart: (e: any, currentNode: any) => {
          const parent = currentNode.parent;
          if (parent) {
            const parentNode = parent.getDOMNode();
            if (parentNode) {
              currentNode.parentRect = parentNode.getBoundingClientRect();
            }
          }
          currentNode.beforeSpan = currentNode.getPropValue('span') || 24;
          currentNode.startRect = currentNode.getRect();
        },
        onResize: (e: any, currentNode: any) => {
          const { deltaX } = e;
          const startWidth = currentNode.startRect
            ? currentNode.startRect.width
            : currentNode.beforeSpan * (currentNode.parentRect.width / 24);
          let width = startWidth + deltaX;
          if (!currentNode.startRect) {
            currentNode.startRect = { width };
          }
          width = clamp(width, 0, currentNode.parentRect.width);
          const allowMoveX = Math.round(width - startWidth); // 实际被允许的x轴移动
          currentNode.moveColumn = Math.round(allowMoveX / (currentNode.parentRect.width / 24)); // 计算移动距离所占的列
          if (allowMoveX > 0) {
            currentNode.moveColumn++;
          } else {
            currentNode.moveColumn--;
          }
          currentNode.targetColumn = clamp(currentNode.beforeSpan + currentNode.moveColumn, 1, 24);
          // currentNode.setPropValue('span', currentNode.targetColumn);
          const dom = currentNode.getDOMNode();
          dom.style.width = `${Math.round(width)}px`;
          dom.style.flex = 'none';
          dom.style.maxWidth = '100%';
        },
        onResizeEnd: (e: any, currentNode: any) => {
          currentNode.getDOMNode().style.cssText = '';
          currentNode.targetColumn = clamp(currentNode.targetColumn, 1, 24);
          currentNode.setPropValue('span', currentNode.targetColumn);
        },
      },
    },
  },
};