import { Meta, Story } from "@storybook/addon-docs";
import { Button, ButtonVariantList } from "./Button";

<Meta title="Tests"/>

<Story name="Light States" parameters={{
  pseudo: {
    hover: ButtonVariantList.map(variant => `#${variant}-Hover`),
    focus: ButtonVariantList.map(variant => `#${variant}-Focus`),
    active: ButtonVariantList.map(variant => `#${variant}-Active`),
  },
  themes: {
    default: 'light',
  },
}}>
  <table>
    <tr>
      <th>STATE</th>
      {ButtonVariantList.map(variant => <th>{variant.toUpperCase()}</th>)}
    </tr>
    {["Normal", "Hover", "Active", "Focus", "Disabled", "Loading"].map(state => <tr>
      <td>{state}</td>
      {ButtonVariantList.map(variant => <td><Button id={`${variant}-${state}`} disabled={state === "Disabled"}
                                                    isLoading={state === "Loading"}
                                                    variant={variant}>Button</Button></td>)}
    </tr>)}
  </table>
</Story>

<Story name="Dark States" parameters={{
  pseudo: {
    hover: ButtonVariantList.map(variant => `#${variant}-Hover`),
    focus: ButtonVariantList.map(variant => `#${variant}-Focus`),
    active: ButtonVariantList.map(variant => `#${variant}-Active`),
  },
  themes: {
    default: 'dark',
  },
}}>
  <table>
    <tr>
      <th>STATE</th>
      {ButtonVariantList.map(variant => <th>{variant.toUpperCase()}</th>)}
    </tr>
    {["Normal", "Hover", "Active", "Focus", "Disabled"].map(state => <tr>
      <td>{state}</td>
      {ButtonVariantList.map(variant => <td><Button id={`${variant}-${state}`} disabled={state === "Disabled"}
                                                    variant={variant}>Button</Button></td>)}
    </tr>)}
  </table>
</Story>

<Story name="High-Contrast States" parameters={{
  pseudo: {
    hover: ButtonVariantList.map(variant => `#${variant}-Hover`),
    focus: ButtonVariantList.map(variant => `#${variant}-Focus`),
    active: ButtonVariantList.map(variant => `#${variant}-Active`),
  },
  themes: {
    default: 'highcontrast',
  },
}}>
  <table>
    <tr>
      <th>STATE</th>
      {ButtonVariantList.map(variant => <th>{variant.toUpperCase()}</th>)}
    </tr>
    {["Normal", "Hover", "Active", "Focus", "Disabled"].map(state => <tr>
      <td>{state}</td>
      {ButtonVariantList.map(variant => <td><Button id={`${variant}-${state}`} disabled={state === "Disabled"}
                                                    variant={variant}>Button</Button></td>)}
    </tr>)}
  </table>
</Story>
