import { ComponentConfig } from '@puckeditor/core';
import ColorPicker from '../fields/color-picker';
import TopInvestorsSection, {
  TopInvestorsProps,
} from '../sections/top-investors-section';

export const TopInvestorsBlock: ComponentConfig<{
  props: TopInvestorsProps;
  fields: {
    userField: {
      type: 'userField';
      option: boolean;
    };
  };
}> = {
  label: 'Top Investors',
  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: 'Subtitle' },
    colors: {
      type: 'object',
      label: 'Background Color',
      objectFields: {
        color1: {
          type: 'custom',
          label: 'Color 1',
          render: (props) => <ColorPicker {...props} />,
        },
        color2: {
          type: 'custom',
          label: 'Color 2',
          render: (props) => <ColorPicker {...props} />,
        },
      },
    },
  },
  resolveFields: (data, { fields }) => {
    if (data.props?.variant === 'variant1') {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      const { subtitle, ...rest } = fields;
      return rest;
    }

    return fields;
  },
  defaultProps: {
    variant: 'variant1',
    title: 'Top Investors',
    subtitle: 'A new way to book travel online, saving you time. With trip',
    colors: {
      color1: '#EE6A2D',
      color2: '#F1FE92',
    },
  },
  render: TopInvestorsSection,
};