import React from 'react';
import type { ArgTypes } from '@storybook/react-vite';

import { Button } from '../components/Button/Button';
import { Tag } from '../components/Tag/Tag';
import { H1 } from '../components/Typography/H1/H1';
import { H2 } from '../components/Typography/H2/H2';
import { H3 } from '../components/Typography/H3/H3';
import { H4 } from '../components/Typography/H4/H4';
import { H5 } from '../components/Typography/H5/H5';
import { Paragraph } from '../components/Typography/Paragraph/Paragraph';

const booleanOptionsMapping = Object.freeze({
  true: true,
  false: false,
});

const numericOptionsMapping = Object.freeze({
  '0': 0,
  '1': 1,
  '-1': -1,
  '100 000 000': 100_000_000,
  '1234.45': 1234.45,
});

const stringOptionsMapping = Object.freeze({
  '""': '',
  '"Lorem ipsum"': 'Lorem ipsum',
  '"Lorem ipsum" (M)': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  '"Lorem ipsum" (L)':
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque, ante a dictum fringilla, nisi sapien fermentum lorem, at malesuada risus quam ut purus.',
  '"Lorem ipsum" (paragraph)':
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque, ante a dictum fringilla, nisi sapien fermentum lorem, at malesuada risus quam ut purus. Vivamus eu tortor eget augue venenatis iaculis vel vitae ipsum. Suspendisse potenti. Phasellus pulvinar dolor at tortor bibendum, ac pretium nunc interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam hendrerit, enim et convallis pellentesque, tellus nibh bibendum leo, eu tristique est quam et est. Cras rutrum viverra euismod. Pellentesque diam mauris, lobortis id eros non, scelerisque fringilla arcu.',
});

const typographyOptionsMapping = Object.freeze({
  '<H1 />': <H1>Lorem ipsum dolor sit amet</H1>,
  '<H1 super long />': (
    <H1>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque, ante a dictum fringilla, nisi
      sapien fermentum lorem, at malesuada risus quam ut purus. Vivamus eu tortor eget augue venenatis iaculis vel vitae
      ipsum.
    </H1>
  ),
  '<H2 />': <H2>Lorem ipsum dolor sit amet</H2>,
  '<H3 />': <H3>Lorem ipsum dolor sit amet</H3>,
  '<H4 />': <H4>Lorem ipsum dolor sit amet</H4>,
  '<H5 />': <H5>Lorem ipsum dolor sit amet</H5>,
  '<Text>Lorem ipsum</Text>': <Paragraph>Lorem ipsum</Paragraph>,
  '<Text>Lorem ipsum</Text> (M)': <Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Paragraph>,
  '<Text>Lorem ipsum</Text> (L)': (
    <Paragraph>
      ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam.
    </Paragraph>
  ),
  '<Text>Lorem ipsum</Text> (paragraph)': (
    <Paragraph>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque, ante a dictum fringilla, nisi
      sapien fermentum lorem, at malesuada risus quam ut purus. Vivamus eu tortor eget augue venenatis iaculis vel vitae
      ipsum. Suspendisse potenti. Phasellus pulvinar dolor at tortor bibendum, ac pretium nunc interdum. Orci varius
      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam hendrerit, enim et convallis
      pellentesque, tellus nibh bibendum leo, eu tristique est quam et est. Cras rutrum viverra euismod. Pellentesque
      diam mauris, lobortis id eros non, scelerisque fringilla arcu.
    </Paragraph>
  ),
});

const buttonOptionsMapping = Object.freeze({
  '<Button>Hi</Button>': <Button>Hi</Button>,
  '<Button variant="primary">Hello world</Button>': <Button variant='primary'>Hello world</Button>,
  '<Button variant="secondary">Hello world</Button>': <Button variant='secondary'>Hello world</Button>,
  '<Tag>Hello world</Tag>': <Tag>Hello world</Tag>,
});

const tagOptionsMapping = Object.freeze({
  '<Tag type="success">Hello world</Tag>': <Tag level='success'>Hello world</Tag>,
  '<Tag type="notice">Hello world</Tag>': <Tag level='notice'>Hello world</Tag>,
  '<Tag type="alert">Hello world</Tag>': <Tag level='alert'>Hello world</Tag>,
  '<Tag type="error">Hello world</Tag>': <Tag level='error'>Hello world</Tag>,
});

const reactNodeOptionsMapping = Object.freeze({
  undefined: undefined,
  ...booleanOptionsMapping,
  ...numericOptionsMapping,
  ...stringOptionsMapping,
  ...typographyOptionsMapping,
  ...buttonOptionsMapping,
  ...tagOptionsMapping,
});

export const predefinedArgTypes = {
  boolean: {
    defaultValue: undefined,
    options: Object.keys(booleanOptionsMapping),
    mapping: booleanOptionsMapping,
  },
  string: {
    defaultValue: undefined,
    options: Object.keys(stringOptionsMapping),
    mapping: stringOptionsMapping,
  },
  numeric: {
    defaultValue: undefined,
    options: Object.keys(numericOptionsMapping),
    mapping: numericOptionsMapping,
  },
  typography: {
    defaultValue: undefined,
    options: Object.keys(typographyOptionsMapping),
    mapping: typographyOptionsMapping,
  },
  button: {
    defaultValue: undefined,
    options: Object.keys(buttonOptionsMapping),
    mapping: buttonOptionsMapping,
  },
  tag: {
    defaultValue: undefined,
    options: Object.keys(tagOptionsMapping),
    mapping: tagOptionsMapping,
  },
  ReactNode: {
    defaultValue: undefined,
    options: Object.keys(reactNodeOptionsMapping),
    mapping: reactNodeOptionsMapping,
    table: {
      type: {
        summary: 'ReactNode',
      },
    },
    type: {
      required: false,
      name: 'other',
      value: 'ReactNode',
    },
  },
} satisfies ArgTypes;

export function generateSvgPlaceholder(width: number, height?: number): string {
  return (
    'data:image/svg+xml;base64,' +
    btoa(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height ?? width}" width="${width}" height="${
      height ?? width
    }">
  <rect width="${width}" height="${height ?? width}" fill="#cccccc"></rect>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="monospace" font-size="26px" fill="#333333">${width}x${
    height ?? width
  }</text>
</svg>`)
  );
}