import { ComponentConfig } from '@puckeditor/core';
import ImagePicker from '../fields/image-picker';
import ReferralSection, { ReferralProps } from '../sections/referral-section';

export const ReferralBlock: ComponentConfig<{
  props: ReferralProps;
  fields: {
    userField: {
      type: 'userField';
      option: boolean;
    };
  };
}> = {
  label: 'Referral',
  fields: {
    variant: {
      type: 'select',
      label: 'Variant',
      options: [
        { label: 'Variant 1 (default)', value: 'variant1' },
        { label: 'Variant 2', value: 'variant2' },
      ],
    },
    title: { type: 'text', label: 'Title' },
    subTitle: { type: 'text', label: 'Sub Title' },
    description: { type: 'textarea', label: 'Description' },
    image: {
      type: 'custom',
      label: 'Image',
      render: (props) => <ImagePicker {...props} />,
    },
    cards: {
      type: 'array',
      label: 'Cards',
      min: 1,
      max: 3,
      getItemSummary: (item) => item.title || 'Card',
      arrayFields: {
        icon: {
          type: 'custom',
          label: 'Icon',
          render: (props) => <ImagePicker {...props} />,
        },
        title: { type: 'text', label: 'Title' },
        description: { type: 'textarea', label: 'Description' },
      },
      defaultItemProps: {
        icon: '',
        title: 'Subheading one',
        description: 'A short description',
      },
    },
    levels: {
      type: 'array',
      label: 'Levels',
      min: 1,
      max: 5,
      getItemSummary: (item) => item.title || 'Level',
      arrayFields: {
        title: { type: 'text', label: 'Title' },
      },
      defaultItemProps: {
        title: 'Level 1 - Bonus 2%',
      },
    },
    quote: { type: 'textarea', label: 'Quote' },
  },
  resolveFields: (data, { fields }) => {
    if (data.props?.variant === 'variant2') {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      const { subTitle, cards, ...rest } = fields;
      return rest;
    }

    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { levels, quote, ...rest } = fields;
    return rest;
  },
  defaultProps: {
    variant: 'variant1',
    title: 'Affiliate Program',
    subTitle: 'Referral',
    description:
      'Access diversified investment strategies managed by algorithmic trading and market experts.',
    image: 'https://placehold.co/494x514',
    cards: [
      {
        icon: '',
        title: 'Subheading one',
        description: 'A short description',
      },
      {
        icon: '',
        title: 'Subheading two',
        description: 'A short description',
      },
    ],
    levels: [
      { title: 'Level 1 - Bonus 2%' },
      { title: 'Level 2 - Bonus 2%' },
      { title: 'Level 3 - Bonus 2%' },
    ],
    quote:
      'Plan your trip with a 3-step trip plan. Check in out at a glance, select hotel rooms on the go, and create a packing list',
  },
  render: ReferralSection,
};