export const VALID_VARIANT_MAP: Record<string, string[]> = {
  ['vertical']: ['card', 'media'],
  ['horizontal']: ['default', 'select', 'card'],
};

export const PRESET_VARIANT_MAP: Record<string, string[]> = {
  ['default']: ['1', '2', '3', '4'],
  ['select']: ['1'],
  ['card|vertical']: ['1', '2'],
  ['card|horizontal']: ['1', '2', '3', '4', '5'],
  ['media']: ['1', '2'],
};

const _getVariantSetter = (target: any) => {
  const _itemLayout = target.parent.getPropValue('itemLayout');
  let options: any[] = [];
  let initialValue = 'default';
  // 垂直模式下，只展示卡片和图文类型
  // 水平模式下，只展示默认、选择器、卡片类型
  if (_itemLayout === 'vertical') {
    options = [
      { title: '卡片', value: 'card' },
      { title: '图文', value: 'media' },
    ];
    initialValue = 'card';
  } else {
    options = [
      { title: '默认', value: 'default' },
      { title: '选择器', value: 'select' },
      { title: '卡片', value: 'card' },
    ];
    initialValue = 'default';
  }
  return {
    componentName: 'RadioGroupSetter',
    props: {
      options: options,
    },
    initialValue,
  };
};

export const getVariantPropConfig = (condition?: (t: any) => boolean) => {
  return {
    name: 'variant',
    title: '组件类型',
    condition: condition,
    setter: _getVariantSetter,
    extraProps: {
      setValue(target: any, value: any) {
        // value变动时，如果当前的preset.variant在当前的variant下不支持，则设置为默认
        const _layout = target.parent.getPropValue('itemLayout');
        let _variantWithLayout =
          'card' === value ? `${value}|${_layout}` : value;
        const validPresetVariants =
          PRESET_VARIANT_MAP[_variantWithLayout as string];
        if (
          validPresetVariants &&
          !validPresetVariants.includes(
            target.parent.getPropValue('preset.variant') as string
          )
        ) {
          target.parent.setPropValue('preset.variant', validPresetVariants[0]);
        }
        const _origin__designMode_flag__ = target.parent.getPropValue(
          '__designMode_flag__'
        );
        target.parent.setPropValue(
          '__designMode_flag__',
          !_origin__designMode_flag__
        );
        return value;
      },
    },
  };
};

const _getPresetVariantSetter = (target: any) => {
  const _itemLayout = target.parent.getPropValue('itemLayout');
  const _variant = target.parent.getPropValue('variant');
  const validKeys = Object.keys(PRESET_VARIANT_MAP);
  let _variantWithLayout =
    'card' === _variant ? `${_variant}|${_itemLayout}` : _variant;
  if (!validKeys.includes(_variantWithLayout as string)) {
    return {
      componentName: 'div',
      props: {
        children: '不支持的变体',
      },
    };
  }
  let options: any[] = [];
  let validPresetVariants = PRESET_VARIANT_MAP[_variantWithLayout];
  validPresetVariants?.forEach((presetVariant) => {
    options.push({
      title: `${_variant.substring(0, 1).toUpperCase()}${presetVariant}`,
      value: presetVariant,
    });
  });
  let initialValue = '1';

  return {
    componentName: 'RadioGroupSetter',
    props: {
      options: options,
    },
    initialValue,
  };
};

export const getPresetVariantPropConfig = (condition?: (t: any) => boolean) => {
  return {
    name: 'preset.variant',
    title: '预设变体',
    condition: condition,
    setter: _getPresetVariantSetter,
  };
};