import React from 'react';
import {
  Title,
  Subtitle,
  Description,
  Primary,
  Stories,
  PRIMARY_STORY,
  ArgsTable,
  // eslint-disable-next-line import/no-extraneous-dependencies
} from '@storybook/addon-docs/blocks';
import { FaRegFrownOpen } from '@react-icons/all-files/fa/FaRegFrownOpen';

import { imagePrettyUrl } from '~helpers/getters';
import LazyImage from '.';

export default {
  title: 'Theme/Hooks/Lazy Image',
  component: LazyImage,
  argTypes: {
    height: {
      name: 'height',
      type: { name: 'number', required: false },
      defaultValue: '',
      description: 'The image height.',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: '' },
      },
    },
    width: {
      name: 'width',
      type: { name: 'number', required: false },
      defaultValue: '',
      description: 'The image width.',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: '' },
      },
    },
    offset: {
      name: 'offset',
      type: { name: 'number', required: false },
      defaultValue: '',
      description:
        'When the user scroll the page to this offset of the image position, it will start loading.',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: '' },
      },
    },
    style: {
      name: 'style',
      type: { name: 'object', required: false },
      defaultValue: '',
      description: 'Additional styles for the image.',
      table: {
        type: { summary: 'object' },
        defaultValue: { summary: '' },
      },
    },
    className: {
      name: 'className',
      type: { name: 'string', required: false },
      defaultValue: '',
      description: 'Additional class name for the image.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '' },
      },
    },
    src: {
      name: 'src',
      type: { name: 'string', required: false },
      defaultValue: '',
      description: 'The image url.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '' },
      },
    },
    srcSet: {
      name: 'srcSet',
      type: { name: 'string', required: false },
      defaultValue: '',
      description: 'The image srcSet attribute.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '' },
      },
    },
    alt: {
      name: 'alt',
      type: { name: 'string', required: false },
      defaultValue: '',
      description: 'The image alt attribute.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '' },
      },
    },
    sizes: {
      name: 'sizes',
      type: { name: 'string', required: false },
      defaultValue: '',
      description: 'The image sizes attribute.',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '' },
      },
    },
    defaultImg: {
      name: 'defaultImg',
      type: { name: 'element', required: false },
      defaultValue: null,
      description:
        'If the image source returns a 404 (it exists but the url is broken), the component will return this element instead. You can use an `<img>` or even a React icon here.',
      table: {
        type: { summary: 'element' },
        defaultValue: { summary: null },
      },
      control: {
        type: null,
      },
    },
    once: {
      name: 'once',
      type: { name: 'boolean', required: false },
      defaultValue: '',
      description:
        'When set to True, once this component is loaded, LazyLoad will not care about it anymore',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          'A component that displays a lazy-loaded `<img>`. Use this component if you have 1 image to lazyload, or if you have images for different breakpoints and want the browser to decide when to serve the images based on the device, bandwidth, etc.',
      },
      page: () => (
        <>
          <Title />
          <Subtitle />
          <Description />
          <Primary />
          <Stories />
          <ArgsTable story={PRIMARY_STORY} />
        </>
      ),
    },
  },
};

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

export const Default = Template.bind({});
Default.args = {
  height: 200,
  width: 300,
  offset: 200,
  style: { 'border-radius': '1rem' },
  className: 'my-class',
  src: imagePrettyUrl('fit-in/960x250/313df295c19d7c5f137ceda9d0cc5df7.jpeg'),
  srcSet: '',
  alt: 'Image Alt',
};

const ErrorImageTemplate = (args) => <LazyImage {...args} />;

export const BrokenURL = ErrorImageTemplate.bind({});
BrokenURL.story = {
  parameters: {
    docs: {
      storyDescription:
        'The example below shows a replacement image if the original image URL is broken (returns a 404). This is useful for showing a default image if you have broken image links. Your default image can be any element, use an `<img>` or React Icon.',
    },
  },
  args: {
    src: imagePrettyUrl('fit-in/960x250/313df295c19d7c5f137ceda9d0cc5dffdakfdlaewf7.jpeg'),
    srcSet: '',
    alt: 'This image has a broken URL',
    defaultImg: <FaRegFrownOpen size={250} />,
    once: false,
    style: { 'border-radius': '1rem' },
  },
};
