import { ComponentConfig } from '@puckeditor/core';
import ImagePicker from '../fields/image-picker';
import UserRankingSection, {
  UserRankingProps,
} from '../sections/user-ranking-section';

export const UserRankingBlock: ComponentConfig<{
  props: UserRankingProps;
  fields: {
    userField: {
      type: 'userField';
      option: boolean;
    };
  };
}> = {
  label: 'User Ranking',
  fields: {
    title: { type: 'text', label: 'Title' },
    subtitle: { type: 'textarea', label: 'Subtitle' },
    image: {
      type: 'custom',
      label: 'Right Image',
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      render: (props: any) => <ImagePicker {...props} />,
    },
    users: {
      type: 'array',
      label: 'Users',
      min: 1,
      max: 6,
      getItemSummary: (item) => item.name || 'User',
      arrayFields: {
        name: { type: 'text', label: 'Name' },
        desc: { type: 'text', label: 'Description' },
      },
      defaultItemProps: {
        name: 'User',
        desc: 'Choose From a Wide Range of Properties',
      },
    },
  },
  defaultProps: {
    title: 'User Ranking',
    subtitle:
      'A new way to book travel online, saving you time. With trip, There are no confusing spreadsheets or complicated searches. We just ask the right questions, find the best deal for you, then book it.',
    users: [
      { name: 'Arbn', desc: 'Choose From a Wide Range of Properties' },
      { name: 'Sarah', desc: 'Choose From a Wide Range of Properties' },
      { name: 'Mike', desc: 'Choose From a Wide Range of Properties' },
    ],
  },
  render: UserRankingSection,
};