import { t } from '../../src/locale';
import snippets from './snippets';
import { getRowInitChildrenByColNumber } from 'lowcode/_com-props/getRowInitChildrenByColNumber';
import loopData from 'lowcode/_com-props/loopData';

export default {
  snippets,
  componentName: 'Row',
  "group": t('gridRow.key_fNHoMV6X2eBP'),
  title: t('gridRow.key_xnexalZpHVYs'),
  category: t('gridRow.key_tUXz9lZdYQqE'),
  props: [
    loopData,
    {
      name: 'fold',
      title: { label: t('gridRow.key_eghxHsYQ2UTG'), tip: t('gridRow.key_eghxHsYQ3UTG') },
      propType: 'bool',
      defaultValue: false,
      extraProps: {
        setValue(target: any, value: any) {
          if (value) {
            target.parent.setPropValue('activeIndex', 0)
          }
        },
      },
    },
    {
      name: 'activeIndex',
      title: { label: t('gridRow.key_eghxHsYQ4UTG'), tip: t('gridRow.key_eghxHsYQ5UTG') },
      defaultValue: 0,
      setter: {
        componentName: 'SelectSetter',
        props: {
          options: []
        }
      },
      extraProps: {
        getValue(target: any, value: any) {
          let childRenNameList = target.node.children.map((item: any, index: number) => {
            return {
              title: item.propsData.componentName || `col_${index}`,
              key: item.propsData.componentKey,
              value: index,
            }
          }) || []
          target.setter.props.options = childRenNameList
          return value || 0
        },
      },
      condition: (target: any) => {
        return target.parent.getPropValue('fold')
      }
    },

    {
      name: 'align',
      title: { label: t('gridRow.key_6dtOHABw8kxj'), tip: t('gridRow.key_wwYlJllNltIp') },
      propType: { type: 'oneOf', value: ['top', 'middle', 'bottom'] },
    },
    {
      name: 'h-gutter',
      title: {
        label: t('gridRow.key_eghxHsYQ1UTG'),
        tip: t('gridRow.key_kU6aNo9RIWuc'),
      },
      propType: 'number',
      setter: {
        componentName: 'NumberSetter',
        props: {
          min: 0,
        },
      },
      defaultValue: 0,
      extraProps: {
        getValue(target) {
          const { node } = target;
          const gutter = node.getPropValue('gutter');
          if (typeof gutter === 'number') {
            return gutter;
          } else if (Array.isArray(gutter)) {
            return gutter[0];
          }
          return 0;
        },
        setValue(target, value) {
          const { node } = target;
          const gutter = node.getPropValue('gutter');
          if (Array.isArray(gutter)) {
            gutter[0] = value;
            node.setPropValue('gutter', gutter);
          } else {
            node.setPropValue('gutter', [value, 0]);
          }
        },
      },
    },
    {
      name: 'v-gutter',
      title: {
        label: t('gridRow.key_0rL2khJGxyAr'),
        tip: t('gridRow.key_21oMUXzzR4Me'),
      },
      propType: 'number',
      setter: {
        componentName: 'NumberSetter',
        props: {
          min: 0,
        },
      },
      defaultValue: 0,
      extraProps: {
        getValue(target) {
          const { node } = target;
          const gutter = node.getPropValue('gutter');
          if (typeof gutter === 'number') {
            return 0;
          } else if (Array.isArray(gutter)) {
            return gutter[1];
          }
          return 0;
        },
        setValue(target, value) {
          const { node } = target;
          const gutter = node.getPropValue('gutter');
          if (Array.isArray(gutter)) {
            gutter[1] = value;
            node.setPropValue('gutter', gutter);
          } else {
            node.setPropValue('gutter', [gutter, value]);
          }
        },
      },
    },
    {
      name: 'justify',
      title: { label: t('gridRow.key_RFFQIZhoOIbf'), tip: t('gridRow.key_6urKg3LUUSYa') },
      propType: {
        type: 'oneOf',
        value: ['start', 'end', 'center', 'space-around', 'space-between'],
      },
    },
    {
      name: 'wrap',
      title: { label: t('gridRow.key_FAr6jUiyP7z3'), tip: t('gridRow.key_tcUnf2iinPga') },
      propType: 'bool',
      defaultValue: true,
    },
    {
      name: 'styleWebOS',
      title: { label: t('gridRow.key_FAr6jUiyP7z4'), tip: t('gridRow.key_tcUnf2iinPgb') },
      propType: 'bool',
      setter: "BoolSetter",
      defaultValue: false,
    },
  ],
  configure: {
    component: { isContainer: true, nestingRule: { childWhitelist: ['Col'] } },
    supports: {
      events: false,
      style: true,
      loop: false,
      condition: false
    },
    advanced: {
      initialChildren: (target: any) => {
        let colNum = target.propsData.colNum || 2
        return getRowInitChildrenByColNumber(colNum)
      },
    }
  },
};