import { Meta, Canvas, ArgsTable, Story, SourceState } from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Flex } from "../Flex";
import { Table } from "../Table";
import { IntegrationLogo } from "./IntegrationLogo";

<Meta title="Components/Logos/Integration Logo" component={IntegrationLogo} />

<ComponentHeading
  componentName="Integration Logo"
  description="A specific component to display the logo of a supported integration. This is separate from VendorLogo because we need more control over the logo and its size for rendering within the UI."
  sourcePath="src/components/IntegrationLogo/IntegrationLogo.tsx"
/>

export const logos = [
  "addigy",
  "aws",
  "bamboohr",
  "bitbucket",
  "conveyor",
  "confluence",
  "deploy",
  "docusign",
  "drata",
  "events-api",
  "front",
  "gcp",
  "github",
  "gitlab",
  "google_drive",
  "gsuite",
  "hubspot",
  "jamf",
  "jira",
  "jumpcloud",
  "microsoft_teams",
  "notion",
  "okta",
  "onelogin",
  "service_now",
  "salesforce",
  "slack",
  "zendesk",
  "zoom",
  "[ no match ]",
];

## Installation

```jsx
import { IntegrationLogo } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="IntegrationLogo">
    <IntegrationLogo logo="conveyor" />
  </Story>
</Canvas>

<Canvas withSource={SourceState.OPEN}>
  <Story name="IntegrationLogoTable">
    <div>
      <Table>
        <Table.Head>
          <Table.Row>
            <Table.HeaderCell sortable={false}>Logo</Table.HeaderCell>
            <Table.HeaderCell sortable={false}>Regular</Table.HeaderCell>
            <Table.HeaderCell sortable={false}>Square</Table.HeaderCell>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          {logos.map((logo) => (
            <Table.Row key={logo}>
              <Table.Cell>{logo}</Table.Cell>
              <Table.Cell>
                <IntegrationLogo logo={logo} />
              </Table.Cell>
              <Table.Cell>
                <IntegrationLogo logo={logo} square />
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    </div>
  </Story>
</Canvas>

## API

These are the custom props that extend `React.SVGAttributes<SVGElement>`.

<ArgsTable of={IntegrationLogo} />

## Demos

### Square logo

In some cases, the square logo version will render a different version of the logo.

<Canvas>
  <Story name="Square logo">
    <IntegrationLogo logo="okta" square />
  </Story>
</Canvas>

### Size

Each logo's size has been set to match it's current use case within the Comply
app (24 px tall), so in most cases, you shouldn't need to resize it. However,
the size can be changed by applying styles via `className` or `style`.

<Canvas>
  <Story name="Size">
    <div>
      <Flex className="mb-12 items-center justify-between">
        <IntegrationLogo logo="okta" size={24} />
        <IntegrationLogo logo="okta" size={48} />
        <IntegrationLogo logo="okta" size={72} />
      </Flex>
      <Flex className="items-center justify-between">
        <IntegrationLogo logo="okta" size={24} square />
        <IntegrationLogo logo="okta" size={48} square />
        <IntegrationLogo logo="okta" size={72} square />
      </Flex>
    </div>
  </Story>
</Canvas>

### Sizing

#### With `size` prop

The easiest way to style `IntegrationLogo` is to use the `size` prop. This
prop defines the height of the icon (as well as the width if you are using the
`square` prop).

<Canvas withSource={SourceState.OPEN}>
  <Story name="Size with prop">
    <IntegrationLogo logo="conveyor" size={72} />
  </Story>
</Canvas>

#### With CSS

When styling the `height` property via CSS, the `width` will be calculated
automatically. When styling the `width`, however, the `height` will need to be
set to `auto` to be calculated automatically.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Size with CSS">
    <IntegrationLogo
      logo="conveyor"
      style={{ width: "72px", height: "auto" }}
    />
  </Story>
</Canvas>

### Okta logo with container

<Canvas>
  <Story name="Okta logo with container">
    <div style={{ width: 48, height: 48 }}>
      <Flex
        className="rounded w-full h-full items-center justify-center"
        style={{ backgroundColor: "#0a7ec2" }}
      >
        <IntegrationLogo
          logo="okta"
          color="white"
          style={{ width: "42px", height: "auto" }}
        />
      </Flex>
    </div>
  </Story>
</Canvas>

### Jamf logo with container

<Canvas>
  <Story name="Jamf logo with container">
    <div style={{ width: 48, height: 48 }}>
      <Flex
        className="rounded w-full h-full items-center justify-center"
        style={{ backgroundColor: "#434a54" }}
      >
        <IntegrationLogo logo="jamf" size={32} square />
      </Flex>
    </div>
  </Story>
</Canvas>