import type { ComponentProps } from 'react';
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { List } from './List';

const meta: Meta<typeof List> = {
  title: 'UI kit/List',
  component: List,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof List>;

const defaultAction: ComponentProps<typeof List.Item>['action'] = {
  href: '#',
  onClick: event => {
    event.preventDefault();
    alert('Action clicked');
  },
  value: 'Action',
};

export const Default: Story = {
  args: {
    columns: false,
    dividers: true,
    ellipsis: true,
    icon: { icon: 'shp-checkmark', variant: 'secondary' },
  },
  render: args => (
    <List {...args}>
      <List.Item label='Item 1' value='This is my lorem ipsum dolor sit ament 1' action={defaultAction} />
      <List.Item
        label='Item 2'
        value='This is my lorem ipsum dolor sit ament, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 2'
        action={defaultAction}
      />
      <List.Item
        label='Item 3'
        value='This is my lorem ipsum dolor sit ament, consectetur adipiscing elit 3'
        action={defaultAction}
      />
      <List.Item label='Item 4' value='This is my lorem ipsum dolor sit ament 4' action={defaultAction} />
      <List.Item label='Item 5' value='This is my lorem ipsum dolor 5' action={defaultAction} />
      <List.Item label='Item 6' value='This is my lorem ipsum dolor sit ament 6' action={defaultAction} />
    </List>
  ),
};

export const PlainList: Story = {
  args: {
    verticalAlignment: 'center',
  },
  render: args => (
    <List {...args}>
      <List.Item>This is my lorem ipsum dolor sit ament 1</List.Item>
      <List.Item>
        This is my lorem ipsum dolor sit ament, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua 2
      </List.Item>
      <List.Item>This is my lorem ipsum dolor sit ament, consectetur adipiscing elit 3</List.Item>
      <List.Item>This is my lorem ipsum dolor sit ament 4</List.Item>
      <List.Item>This is my lorem ipsum dolor sit ament 5</List.Item>
      <List.Item action={defaultAction}>This is my lorem ipsum dolor sit ament 6</List.Item>
    </List>
  ),
};

export const PlainListDense: Story = {
  args: {
    dense: true,
  },
  render: args => (
    <List {...args}>
      <List.Item>This is my lorem ipsum dolor sit ament 1</List.Item>
      <List.Item>
        This is my lorem ipsum dolor sit ament, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua 2
      </List.Item>
      <List.Item>This is my lorem ipsum dolor sit ament, consectetur adipiscing elit 3</List.Item>
      <List.Item>This is my lorem ipsum dolor sit ament 4</List.Item>
      <List.Item>This is my lorem ipsum dolor sit ament 5</List.Item>
      <List.Item action={defaultAction}>This is my lorem ipsum dolor sit ament 6</List.Item>
    </List>
  ),
};

export const PlainValueList: Story = {
  args: {
    verticalAlignment: 'center',
  },
  render: args => (
    <List {...args}>
      <List.Item value='This is my lorem ipsum dolor sit ament 1' />
      <List.Item value='This is my lorem ipsum dolor sit ament, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 2' />
      <List.Item value='This is my lorem ipsum dolor sit ament, consectetur adipiscing elit 3' />
      <List.Item value='This is my lorem ipsum dolor sit ament 4' />
      <List.Item value='This is my lorem ipsum dolor sit ament 5' />
      <List.Item value='This is my lorem ipsum dolor sit ament 6' />
    </List>
  ),
};

export const CheckList: Story = {
  args: {
    dividers: true,
    icon: { icon: 'shp-checkmark' },
  },
  render: args => (
    <List {...args}>
      <List.Item label='Item 1' value='This is my lorem ipsum dolor sit ament 1' />
      <List.Item
        label='Item 2'
        value='This is my lorem ipsum dolor sit ament, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 2'
      />
      <List.Item label='Item 3' value='This is my lorem ipsum dolor sit ament, consectetur adipiscing elit 3' />
      <List.Item label='Item 4' value='This is my lorem ipsum dolor sit ament 4' />
      <List.Item label='Item 5' value='This is my lorem ipsum dolor sit ament 5' />
      <List.Item label='Item 6' value='This is my lorem ipsum dolor sit ament 6' />
    </List>
  ),
};

export const Advanced: Story = {
  args: {
    dividers: undefined,
    icon: { icon: 'shp-checkmark', variant: 'secondary' },
  },
  render: args => (
    <List {...args}>
      <List.Item label='Item 1' value='Icon and its color is passed via context' />
      <List.Item label='Item 2' value='Icon and its color is passed via context' />
      <List.Item label='Item 3' value='Icon and its color is passed via context' />
      <List.Item
        icon={{ icon: 'shp-heart', variant: 'primary' }}
        label='Item 4'
        value='Heart icon, primary variant is defined by the item '
      />
      <List.Item
        icon={{ icon: 'shp-alert', variant: 'secondary' }}
        label='Item 5'
        value='Alert icon, secondary variant is defined by the item'
      />
      <List.Item icon={true} label='Item 6' ellipsis={false}>
        <strong>
          Overriden by the item: icon placeholder padding, <a href='#'>link is defined</a> as children, ellipsis is
          disabled
        </strong>
      </List.Item>
      <List.Item
        icon={false}
        label='Item 6'
        value='No icon and no padding but with an action'
        action={{
          href: '#',
          onClick: event => {
            event.preventDefault();
            alert('Action clicked');
          },
          value: 'Action',
        }}
      />
    </List>
  ),
};

export const AlignTop: Story = {
  args: {
    verticalAlignment: 'top',
    icon: { icon: 'shp-heart', variant: 'primary' },
  },
  render: args => (
    <List {...args}>
      <List.Item>This is my lorem ipsum dolor sit ament 1</List.Item>
      <List.Item>
        This is my lorem ipsum dolor sit ament, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua 2
      </List.Item>
      <List.Item>This is my lorem ipsum dolor sit ament, consectetur adipiscing elit 3</List.Item>
      <List.Item>This is my lorem ipsum dolor sit ament 4</List.Item>
      <List.Item>This is my lorem ipsum dolor sit ament 5</List.Item>
      <List.Item action={defaultAction}>This is my lorem ipsum dolor sit ament 6</List.Item>
    </List>
  ),
};

export const AlignCenter: Story = {
  args: {
    verticalAlignment: 'center',
    icon: { icon: 'shp-heart', variant: 'primary' },
  },
  render: args => (
    <List {...args}>
      <List.Item>This is my lorem ipsum dolor sit ament 1</List.Item>
      <List.Item>
        This is my lorem ipsum dolor sit ament, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua 2
      </List.Item>
      <List.Item>This is my lorem ipsum dolor sit ament, consectetur adipiscing elit 3</List.Item>
      <List.Item>This is my lorem ipsum dolor sit ament 4</List.Item>
      <List.Item>This is my lorem ipsum dolor sit ament 5</List.Item>
      <List.Item action={defaultAction}>This is my lorem ipsum dolor sit ament 6</List.Item>
    </List>
  ),
};

export const AlignBottom: Story = {
  args: {
    verticalAlignment: 'bottom',
    icon: { icon: 'shp-heart', variant: 'primary' },
  },
  render: args => (
    <List {...args}>
      <List.Item>This is my lorem ipsum dolor sit ament 1</List.Item>
      <List.Item>
        This is my lorem ipsum dolor sit ament, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua 2
      </List.Item>
      <List.Item>This is my lorem ipsum dolor sit ament, consectetur adipiscing elit 3</List.Item>
      <List.Item>This is my lorem ipsum dolor sit ament 4</List.Item>
      <List.Item>This is my lorem ipsum dolor sit ament 5</List.Item>
      <List.Item action={defaultAction}>This is my lorem ipsum dolor sit ament 6</List.Item>
    </List>
  ),
};

export const ListWithBasicItem: Story = {
  args: {},
  render: args => (
    <List {...args}>
      <List.BasicItem>This is my lorem ipsum dolor sit ament 1</List.BasicItem>
      <List.BasicItem>This is my lorem ipsum dolor sit ament 2</List.BasicItem>
      <List.BasicItem>This is my lorem ipsum dolor sit ament 3</List.BasicItem>
      <List.BasicItem>This is my lorem ipsum dolor sit ament 4</List.BasicItem>
      <List.BasicItem>This is my lorem ipsum dolor sit ament 5</List.BasicItem>
      <List.BasicItem>This is my lorem ipsum dolor sit ament 6</List.BasicItem>
    </List>
  ),
};
ListWithBasicItem.storyName = 'List with basic items';