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

import { Anchor } from '../Anchor/Anchor';
import { Icon } from '../Icon/Icon';
import { Checkbox } from '../Inputs/Checkbox/Checkbox';
import { Strong } from '../Typography/Strong/Strong';
import { Text } from '../Typography/Text/Text';

import { DataList } from './DataList';
import { getDatalistItemProps } from './DataListItem';
import { listOfFruits, listOfVegetables } from './fixtures';

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

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

export const Default: Story = {
  args: {
    children: listOfFruits.map((item, index) => (
      <DataList.Item key={index}>
        <DataList.Item.Cell>
          <Text>{item.name}</Text>
        </DataList.Item.Cell>
      </DataList.Item>
    )),
  },
};

export const WithDescription: Story = {
  args: {
    children: listOfFruits.map((item, index) => (
      <DataList.Item key={index}>
        <DataList.Item.Cell>
          <Strong>{item.name}</Strong>
          <Text>{item.description}</Text>
        </DataList.Item.Cell>
      </DataList.Item>
    )),
  },
};

export const TwoColumns: Story = {
  args: {
    children: listOfFruits.map((item, index) => (
      <DataList.Item key={index}>
        <DataList.Item.Cell>
          <Strong>{item.name}</Strong>
        </DataList.Item.Cell>
        <DataList.Item.Cell>
          <Text align='right'>{item.description}</Text>
        </DataList.Item.Cell>
      </DataList.Item>
    )),
  },
};

export const ThreeCells: Story = {
  args: {
    children: listOfFruits.map((item, index) => (
      <DataList.Item key={index}>
        <DataList.Item.Cell grow={false} shrink={false}>
          <Checkbox label='Checkbox label' />
        </DataList.Item.Cell>
        <DataList.Item.Cell>
          <Strong>{item.name}</Strong>
          <Text truncate>{item.description}</Text>
        </DataList.Item.Cell>
        <DataList.Item.Cell grow={false} shrink={false}>
          <Icon icon='shp-arrow-right' />
        </DataList.Item.Cell>
      </DataList.Item>
    )),
  },
};

/**
 * Shows dense DataList split into section with no dividers between items.
 */
export const Sections: Story = {
  args: {
    gap: 'sm',
    dense: true,
    divider: false,
    children: (
      <>
        <DataList.Item divider>
          <DataList.Item.Cell grow={false} shrink={false}>
            <Checkbox label='Checkbox label' />
          </DataList.Item.Cell>
          <DataList.Item.Cell>
            <Text>Select all</Text>
          </DataList.Item.Cell>
        </DataList.Item>
        <DataList.Section>
          <DataList.Section.Header>Fruits</DataList.Section.Header>
          {listOfFruits.map((item, index) => (
            <DataList.Item key={index}>
              <DataList.Item.Cell grow={false} shrink={false}>
                <Checkbox label='Checkbox label' />
              </DataList.Item.Cell>
              <DataList.Item.Cell>
                <Text>{item.name}</Text>
              </DataList.Item.Cell>
            </DataList.Item>
          ))}
        </DataList.Section>

        <DataList.Section>
          <DataList.Section.Header>Vegetables</DataList.Section.Header>
          {listOfVegetables.map((item, index) => (
            <DataList.Item key={index}>
              <DataList.Item.Cell grow={false} shrink={false}>
                <Checkbox label='Checkbox label' />
              </DataList.Item.Cell>
              <DataList.Item.Cell>
                <Text>{item.name}</Text>
              </DataList.Item.Cell>
            </DataList.Item>
          ))}
        </DataList.Section>
      </>
    ),
  },
};

export const NativeHTMLItems: Story = {
  args: {
    children: (
      <>
        <Anchor href='#' {...getDatalistItemProps({})}>
          <Strong>HTML Anchor Element with href</Strong>
          <Text>Anchor</Text>
        </Anchor>
        <Anchor {...getDatalistItemProps({ disabled: true })}>
          <Strong>HTML Anchor Element (with no href)</Strong>
          <Text>Anchor + aria-disabled</Text>
        </Anchor>
        <Anchor {...getDatalistItemProps({ disabled: true })}>
          <Strong>HTML Anchor Element (with no href)</Strong>
          <Text>Anchor + data-disabled</Text>
        </Anchor>
        <div tabIndex={0} {...getDatalistItemProps({})}>
          <Strong>HTML Div Element</Strong>
          <Text>Div</Text>
        </div>

        <div {...getDatalistItemProps({ disabled: true })}>
          <Strong>HTML Div Element</Strong>
          <Text>Div + aria-disabled</Text>
        </div>
        <div {...getDatalistItemProps({ disabled: true })}>
          <Strong>HTML Div Element</Strong>
          <Text>Div + data-disabled</Text>
        </div>

        <button {...getDatalistItemProps({})}>
          <Strong>HTML Button Element</Strong>
          <Text>Button</Text>
        </button>
        <button {...getDatalistItemProps({ disabled: true })}>
          <Strong>HTML Button Element</Strong>
          <Text>Button + disabled</Text>
        </button>
        <button {...getDatalistItemProps({ disabled: true })}>
          <Strong>HTML Button Element</Strong>
          <Text>Button + aria-disabled</Text>
        </button>
        <button {...getDatalistItemProps({ disabled: true })}>
          <Strong>HTML Button Element</Strong>
          <Text>Button + data-disabled</Text>
        </button>
      </>
    ),
  },
};

export const NativeHTMLItemCells: Story = {
  args: {
    children: (
      <>
        <DataList.Item>
          <DataList.Item.Cell>
            <Strong>Active item</Strong>
            <Text>Description</Text>
          </DataList.Item.Cell>
          <DataList.Item.Cell grow={false} shrink={false}>
            <Anchor href='#'>Anchor with href</Anchor>
          </DataList.Item.Cell>
        </DataList.Item>
        <DataList.Item aria-disabled>
          <DataList.Item.Cell>
            <Strong>Disabled item</Strong>
            <Text>Description</Text>
          </DataList.Item.Cell>
          <DataList.Item.Cell grow={false} shrink={false}>
            <Anchor href='#'>Anchor with href</Anchor>
          </DataList.Item.Cell>
        </DataList.Item>
        <DataList.Item data-disabled>
          <DataList.Item.Cell>
            <Strong>Disabled item</Strong>
            <Text>Description</Text>
          </DataList.Item.Cell>
          <DataList.Item.Cell grow={false} shrink={false}>
            <Anchor>Anchor with no href</Anchor>
          </DataList.Item.Cell>
        </DataList.Item>
      </>
    ),
  },
};