/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import {
  Title,
  Description,
  Primary,
  ArgsTable,
  PRIMARY_STORY,
} from '@storybook/addon-docs/blocks';
import VerifiedAuthor from '../../../images/icons/verified-author';
import OperatorDetails from '.';

export default {
  title: 'Theme/Molecules/Operator Details',
  component: OperatorDetails,
  argTypes: {
    item: {
      control: {
        type: 'object',
      },
      defaultValue: {
        name: 'Sample Operator Name',
        rating: '5',
        review_link: '/path',
        logo: { filename: '1680183185/wildz.svg' },
        author: { name: 'John Doe', profile_page_path: 'path', image: '1675685947/ellipse-1.png' },
      },
    },
    ribbons: {
      defaultValue: ['Test'],
    },
    link: {
      control: 'text',
      defaultValue: 'https://example.com',
    },
    costumeStyle: {
      control: 'text',
      defaultValue: '',
    },
    template: {
      control: 'text',
      defaultValue: '',
    },
    showRating: {
      control: 'boolean',
      defaultValue: true,
    },
    showAuthor: {
      control: 'boolean',
      defaultValue: true,
    },
    showReviewLink: {
      control: 'boolean',
      defaultValue: true,
    },
    authorTemplateTwo: {
      control: 'boolean',
      defaultValue: false,
    },
    useOneStarRating: {
      control: 'boolean',
      defaultValue: true,
    },
    halfStars: {
      control: 'boolean',
      defaultValue: false,
    },
    showRatingLabel: {
      control: 'boolean',
      defaultValue: false,
    },
    showRatingDecimal: {
      control: 'boolean',
      defaultValue: false,
    },
    imageWidth: {
      control: 'number',
      defaultValue: 96,
    },
    imageHeight: {
      control: 'number',
      defaultValue: 96,
    },
    icon: {
      defaultValue: <VerifiedAuthor />,
    },
  },
  parameters: {
    docs: {
      description: {
        component: 'OperatorDetails component',
      },
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

const Template = (args) => <OperatorDetails {...args} />;

export const Default = Template.bind({});
