import { ComponentConfig } from '@puckeditor/core';
import ImagePicker from '../fields/image-picker';
import CalculationSection, {
  CalculationProps,
} from '../sections/calculation-section';

export const CalculationBlock: ComponentConfig<{
  props: CalculationProps;
  fields: {
    userField: {
      type: 'userField';
      option: boolean;
    };
  };
}> = {
  label: 'Calculation',
  fields: {
    variant: {
      type: 'select',
      label: 'Variant',
      options: [
        { label: 'Variant 1 (default)', value: 'variant1' },
        { label: 'Variant 2', value: 'variant2' },
      ],
    },
    subtitle: { type: 'text', label: 'Sub Title' },
    title: { type: 'text', label: 'Title' },
    description: { type: 'textarea', label: 'Description' },
    backgroundImage: {
      type: 'custom',
      label: 'Background Image',
      render: (props) => <ImagePicker {...props} />,
    },
    image: {
      type: 'custom',
      label: 'Image',
      render: (props) => <ImagePicker {...props} />,
    },
    buttonLabel: { type: 'text', label: 'Button Label' },
  },
  resolveFields: (data, { fields }) => {
    if (data.props?.variant === 'variant2') {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      const { subtitle, image, ...rest } = fields;
      return rest;
    }

    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { backgroundImage, ...rest } = fields;
    return rest;
  },
  defaultProps: {
    variant: 'variant1',
    subtitle: 'Calculator',
    title: 'Plan Profit Calculation.',
    description:
      'Access diversified investment strategies managed by algorithmic trading and market experts.',
    backgroundImage: '',
    image: 'https://placehold.co/494x514',
    buttonLabel: 'View Profit',
  },
  render: CalculationSection,
};