import type { Meta, StoryObj } from "@storybook/react";
import type { SegmentProps } from "./Segment";
import { Segment } from "./Segment";
import type { SegmentGroupProps } from "./SegmentGroup";
import { SegmentGroup } from "./SegmentGroup";
import {
  Text,
  Flex,
  TextField,
  TextArea,
  RadioGroup,
  Radio,
  Select,
  Option,
  Divider,
} from "..";

type StoryType = StoryObj<typeof Segment>;

const meta: Meta<typeof Segment> = {
  title: "Layout/Segment",
  component: Segment,
  excludeStories: [
    "ColouredBackground",
    "HorizontalStack2",
    "HorizontalStack3",
    "Nested2",
    "Nested3",
    "BottomGapRemoved",
    "CompoundLayout",
    "GapAround",
    "PaymentDetails",
  ],
  argTypes: {
    colour: {
      control: { type: "select" },
      options: ["", "primary", "secondary", "grey", "subtle"],
    },
    inverted: {
      control: { type: "boolean" },
      if: {
        arg: "colour",
      },
    },
  },
};

const sizeOptions = [
  "",
  "size-xs",
  "size-s",
  "size-m",
  "size-l",
  "size-xl",
  "size-xxl",
];

export const Single: StoryType = {
  render: (args: SegmentProps) => (
    <Segment {...args}>
      <Flex
        style={{
          width: "100%",
        }}
        justifyContent="space-between"
      >
        <Text>General liability*</Text>
        <Text>$300.00</Text>
      </Flex>
      <Flex
        style={{
          width: "100%",
        }}
        justifyContent="space-between"
      >
        <Text>Contractor&lsquo;s equipment and small tools</Text>
        <Text>$80.00</Text>
      </Flex>
      <Flex
        style={{
          width: "100%",
        }}
        justifyContent="space-between"
      >
        <Text>Cyber insurance</Text>
        <Text>$250.00</Text>
      </Flex>
    </Segment>
  ),
  args: {
    heading: "Today's Payment",
    inverted: false,
  },
};

export const VerticalStack: StoryType = {
  render: (args: SegmentProps) => (
    <SegmentGroup>
      <Segment {...args}>Item</Segment>
      <Segment>Item</Segment>
      <Segment>Item</Segment>
    </SegmentGroup>
  ),
  args: {
    heading: "",
    inverted: true,
  },
};

export const HorizontalStack: Meta<typeof SegmentGroup> = {
  render: (args: SegmentGroupProps) => (
    <SegmentGroup {...args}>
      <Segment>Item</Segment>
      <Segment>Item</Segment>
      <Segment>Item</Segment>
    </SegmentGroup>
  ),
  args: {
    horizontal: true,
    gap: "size-xs",
  },
  argTypes: {
    gap: {
      control: { type: "select" },
      options: [...sizeOptions],
    },
  },
  parameters: {
    controls: {
      exclude: ["heading", "colour"],
    },
  },
};

export const Nested: StoryType = {
  render: (args: SegmentProps) => (
    <Segment {...args}>
      <SegmentGroup>
        <Segment>Item</Segment>
        <Segment>Item</Segment>
        <Segment>Item</Segment>
      </SegmentGroup>
    </Segment>
  ),
  args: {
    heading: "Today's Payment",
    inverted: false,
  },
};

export const Nested2 = () => (
  <Segment>
    <SegmentGroup>
      <Segment>Item</Segment>
      <Segment>Item</Segment>
    </SegmentGroup>
  </Segment>
);

export const Nested3 = () => (
  <Segment heading="Today's Payment">
    <Segment>Item</Segment>
  </Segment>
);

export const ColouredBackground = () => (
  <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
    <Segment colour="subtle">Subtle</Segment>
    <Segment colour="secondary">Secondary</Segment>
    <Segment inverted colour="primary">
      Primary
    </Segment>
    <Segment inverted colour="secondary">
      Secondary
    </Segment>
  </div>
);

export const HorizontalStack2 = () => (
  <SegmentGroup horizontal>
    <Segment>Item</Segment>
    <Segment>Item</Segment>
  </SegmentGroup>
);

export const HorizontalStack3 = () => (
  <SegmentGroup horizontal>
    <Segment>Item</Segment>
  </SegmentGroup>
);

export const BottomGapRemoved = () => (
  <SegmentGroup horizontal>
    <Segment>
      <TextField label="First name" />
      <TextArea label="Address" />
    </Segment>
    <Segment colour="subtle">
      <RadioGroup label="Colour">
        <Radio value="red" label="Red" />
        <Radio value="blue" label="Blue" />
      </RadioGroup>
      <Select label="Selection">
        <Option>Please select a color</Option>
        <Option key="red" value="red">
          Red
        </Option>
        <Option key="blue" value="blue">
          Blue
        </Option>
        <Option key="green" value="green">
          Green
        </Option>
      </Select>
    </Segment>
  </SegmentGroup>
);

export const CompoundLayout = () => (
  <SegmentGroup horizontal>
    <SegmentGroup>
      <Segment>General liability</Segment>
      <Segment>Business property and equipment</Segment>
      <Segment>Total</Segment>
    </SegmentGroup>
    <SegmentGroup>
      <Segment>Payment Options</Segment>
    </SegmentGroup>
  </SegmentGroup>
);

export const GapAround = () => (
  <SegmentGroup>
    <Segment>Top</Segment>
    <SegmentGroup gap="size-s">
      <Segment>Nested Top</Segment>
      <Segment>Nested Middle</Segment>
      <Segment>Nested Bottom</Segment>
    </SegmentGroup>
    <SegmentGroup horizontal>
      <Segment>Top</Segment>
      <Segment>Middle</Segment>
      <Segment>Bottom</Segment>
    </SegmentGroup>
    <Segment>Bottom</Segment>
  </SegmentGroup>
);

export const PaymentDetails = () => (
  <div style={{ width: "340px" }}>
    <SegmentGroup>
      <Segment heading="Today's Payment">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "2fr 1fr",
            alignItems: "flex-end",
            rowGap: "8px",
          }}
        >
          <Text variant="small">General liability\*</Text>
          <Text variant="small" style={{ justifySelf: "flex-end" }}>
            $300.00
          </Text>
          <Text variant="small">
            Contractor&apos;s equipment and small tools
          </Text>
          <Text variant="small" style={{ justifySelf: "flex-end" }}>
            $80.00
          </Text>
          <Text variant="small">Cyber insurance</Text>
          <Text variant="small" style={{ justifySelf: "flex-end" }}>
            $250.00
          </Text>
        </div>
        <Divider />
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "2fr 1fr",
            alignItems: "flex-end",
            rowGap: "8px",
            width: "100%",
          }}
        >
          <Text variant="small">
            <strong>To pay today</strong>
          </Text>
          <Text variant="small" style={{ justifySelf: "flex-end" }}>
            <strong>$630.00</strong>
          </Text>
        </div>
      </Segment>
      <Segment heading="Monthly Payments">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "2fr 1fr",
            alignItems: "flex-end",
            rowGap: "8px",
            width: "100%",
          }}
        >
          <Text variant="small">
            <strong>First monthly payment taken</strong>
          </Text>
          <Text variant="small" style={{ justifySelf: "flex-end" }}>
            01/01/2022
          </Text>
          <Text variant="small">8 monthly payments of</Text>
          <Text variant="small" style={{ justifySelf: "flex-end" }}>
            $120.00
          </Text>
          <Text variant="small">Then 2 monthly payments of</Text>
          <Text variant="small" style={{ justifySelf: "flex-end" }}>
            $90.00
          </Text>
        </div>
      </Segment>
      <Segment colour="subtle">
        <Flex style={{ width: "100%" }} justifyContent="space-between">
          <Text>
            <strong>Total</strong> (inc. tax + fees)
          </Text>
          <Text>
            <strong>$1,770.00</strong>
          </Text>
        </Flex>
      </Segment>
    </SegmentGroup>
  </div>
);

export default meta;
