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

import { DocsTemplate } from '../../../../.storybook'
import Tile from './Tile'
import {
  createTileButtons,
  createTileMenuProps,
  tileBody,
  tileHeader,
  tileSubHeader,
} from '../tile-stories-helper'
import { toast } from '../../Toast/Toast'

const meta: Meta<typeof Tile> = {
  title: 'Components/Tile',
  component: Tile,
  argTypes: {
    body: { control: false },
    buttons: { control: false },
    menuProps: { control: false },
  },
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=6291-375&p=f&t=v3aRLCcxAtwvrbEe-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=6291-375&p=f&t=v3aRLCcxAtwvrbEe-0'
          description={
            <span>
              The <code>Tile</code> component is a versatile container designed
              to represent chunked or modular information in a visually
              organized manner. It is structured with three main sections: a
              header, body, and footer, each serving distinct purposes. The{' '}
              <code>Tile</code> component is ideal for displaying summarized
              information, key metrics, or grouped content within a confined
              space, making it useful for dashboards, overviews, or modular
              layouts.
            </span>
          }
        />
      ),
    },
  },
}
export default meta

type Story = StoryObj<typeof Tile>

const Template: Story = {
  render: (args) => <Tile {...args} />,
}

const commonArgs = {
  id: 'tile',
  header: tileHeader,
  subHeader: tileSubHeader,
  body: <div>{tileBody}</div>,
  menuProps: createTileMenuProps(),
  buttons: createTileButtons(),
}

export const Basic: Story = { ...Template, args: commonArgs }

export const NoSubHeader: Story = {
  ...Template,
  args: { ...commonArgs, subHeader: undefined },
}

export const NoHeaderImage: Story = {
  ...Template,
  args: {
    ...commonArgs,
    header: { title: tileHeader.title, subtitle: tileHeader.subtitle },
  },
}

export const NoBody: Story = {
  ...Template,
  args: { ...commonArgs, body: undefined, subHeader: undefined },
}

export const NoSubtitle: Story = {
  ...Template,
  args: {
    ...commonArgs,
    header: { imgUrl: tileHeader.imgUrl, title: tileHeader.title },
  },
}

export const NoMenu: Story = {
  ...Template,
  args: { ...commonArgs, menuProps: undefined },
}

export const NoButtons: Story = {
  ...Template,
  args: { ...commonArgs, buttons: undefined },
}

export const HasFocus: Story = {
  ...Template,
  args: { ...commonArgs, tabIndex: 0 },
}

export const SingleButton: Story = {
  ...Template,
  args: {
    ...commonArgs,
    buttons: [
      {
        children: 'Button 2',
        styleType: 'primary',
        onClick: () => toast({ type: 'success', message: 'Button 2 clicked' }),
      },
    ],
  },
}