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

import { predefinedArgTypes } from '../../utils/storybook';
import { Button } from '../Button/Button';
import { List } from '../List/List';
import { Tag } from '../Tag/Tag';
import { H2 } from '../Typography/H2/H2';

import type { ActionCardProps } from './ActionCard';
import { ActionCard } from './ActionCard';

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

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

const ListExample = ({ short, ...rest }: { short?: boolean }) => (
  <List {...rest} columns icon='shp-checkmark'>
    <List.Item
      label='List item 1'
      value='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam'
    />
    <List.Item
      label='List item 2'
      value='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam'
    />
    <List.Item
      label='List item 3'
      value='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam'
    />
    <List.Item
      label='List item 4'
      value='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam'
    />
    <List.Item
      label='List item 5'
      value='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam'
    />
    {!short && (
      <>
        <List.Item
          label='List item 6'
          value='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam'
        />
        <List.Item
          label='List item 7'
          value='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam'
        />
        <List.Item
          label='List item 8'
          value='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam'
        />
        <List.Item
          label='List item 9'
          value='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam'
        />
        <List.Item
          label='List item 10'
          value='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus ac libero ultrices aliquam. Nullam'
        />
      </>
    )}
  </List>
);

const LogoExample = () => (
  <span
    style={{
      paddingInline: '4px',
      paddingBlock: '0px',
      border: '1px dashed magenta',
      color: 'magenta',
      fontWeight: 400,
      fontSize: '24px',
      lineHeight: '1.25',
      whiteSpace: 'nowrap',
    }}
  >
    ACME Corp
  </span>
);

const defaultArgs: Partial<ActionCardProps> = {
  tags: (
    <>
      <Tag level='error'>Hello</Tag>
      <Tag level='success'>world!</Tag>
    </>
  ),
  title: <LogoExample />,
  description: predefinedArgTypes.string.mapping['"Lorem ipsum" (M)'],
  children: <ListExample />,
  buttons: ({ primaryButtonProps, secondaryButtonProps }) => (
    <>
      <Button {...secondaryButtonProps} onClick={() => alert('Secondary button clicked')}>
        Secondary
      </Button>
      <Button {...primaryButtonProps} onClick={() => alert('Primary button clicked')}>
        Primary
      </Button>
    </>
  ),
};

export const Default: Story = {
  args: defaultArgs,
  argTypes: {},
};

export const ThreeColumns: Story = {
  args: {
    ...defaultArgs,
    responsive: false,
  },
  render: props => (
    <>
      <ActionCard {...props} tags={true} />
      <ActionCard {...props} title={<H2>Hello</H2>} />
      <ActionCard {...props}>
        <ListExample short />
      </ActionCard>
    </>
  ),
  decorators: [
    Story => (
      <>
        <style>{`
          .responsive-columns {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
          }
          @media (min-width: 768px) {
            .responsive-columns {
              gap: 24px;
            }
            .responsive-columns > * {
              flex: 1;
              min-width: 0px;
              width: calc((100% - 2 * 24px) / 3);
            }
          }
        `}</style>
        <div className='responsive-columns'>
          <Story />
        </div>
      </>
    ),
  ],
};