import { rocketLaunch, screwdriverWrench, truck } from "@simplybusiness/icons";
import type { Meta, StoryObj } from "@storybook/react";
import { excludeControls } from "../../utils";
import { StoryContainer } from "../../utils/StoryContainer";
import { Divider } from "../Divider";
import { Flex } from "../Flex";
import { Icon } from "../Icon";
import { TextOrHTML } from "../TextOrHTML";
import { Radio } from "./Radio";
import type { RadioGroupProps } from "./RadioGroup";
import { RadioGroup } from "./RadioGroup";

type StoryType = StoryObj<typeof RadioGroup>;

const meta: Meta<typeof RadioGroup> = {
  title: "Forms/Radio",
  component: RadioGroup,
  argTypes: {
    orientation: {
      control: { type: "radio" },
      options: ["horizontal", "vertical"],
    },
    label: {
      control: { type: "text" },
    },
    ...excludeControls(
      "name",
      "groupDisabled",
      "selected",
      "setSelected",
      "defaultValue",
      "value",
      "validationState",
    ),
  },
  decorators: [
    Story => (
      <StoryContainer>
        <Story />
      </StoryContainer>
    ),
  ],
};

export const Default: StoryType = {
  render: (args: RadioGroupProps) => (
    <RadioGroup {...args}>
      <Radio value="red" label="Red" />
      <Radio value="blue" label="Blue" />
    </RadioGroup>
  ),
  args: {
    label: "Color",
    isDisabled: false,
    isRequired: false,
    errorMessage: "",
    orientation: "vertical",
    defaultValue: "blue",
  },
};

export const Disabled: StoryType = {
  render: (args: RadioGroupProps) => (
    <RadioGroup {...args}>
      <Radio value="red" label="Red" isDisabled />
      <Radio value="blue" label="Blue" />
    </RadioGroup>
  ),
  args: {
    label: "Color",
    isDisabled: true,
    isRequired: false,
    errorMessage: "",
    orientation: "vertical",
  },
};

export const DisabledIndividualRadios: StoryType = {
  render: (args: RadioGroupProps) => (
    <RadioGroup {...args}>
      <Radio value="red" label="Red" isDisabled />
      <Radio value="blue" label="Blue" />
    </RadioGroup>
  ),
  args: {
    label: "Color",
    isDisabled: false,
    isRequired: false,
    errorMessage: "",
    orientation: "vertical",
  },
};

export const Valid: StoryType = {
  render: (args: RadioGroupProps) => (
    <RadioGroup {...args}>
      <Radio value="red" label="Red" />
      <Radio value="blue" label="Blue" />
    </RadioGroup>
  ),
  args: {
    label: "Color",
    isDisabled: false,
    isRequired: false,
    errorMessage: "",
    isInvalid: false,
    orientation: "vertical",
  },
};

export const Invalid: StoryType = {
  render: (args: RadioGroupProps) => (
    <RadioGroup {...args}>
      <Radio value="red" label="Red" />
      <Radio value="blue" label="Blue" />
    </RadioGroup>
  ),
  args: {
    label: "Color",
    isDisabled: false,
    isRequired: false,
    errorMessage: "Please select a color",
    isInvalid: true,
    orientation: "vertical",
  },
};

export const WithIconViaChildren: StoryType = {
  render: (args: RadioGroupProps) => (
    <RadioGroup {...args}>
      <Radio value="truck">
        <Icon icon={truck} size="sm" color="var(--color-accent)" />
        Truck
      </Radio>
      <Radio value="rocket">
        <Icon icon={rocketLaunch} size="sm" color="var(--color-accent)" />
        Rocket
      </Radio>
      <Radio value="screwdriver">
        <Icon icon={screwdriverWrench} size="sm" color="var(--color-accent)" />
        Screwdriver
      </Radio>
    </RadioGroup>
  ),
};

export const ComplexLabel: StoryType = {
  render: (args: RadioGroupProps) => (
    <RadioGroup {...args}>
      <Radio value="annual" label="Pay annually">
        <Flex
          style={{
            width: "100%",
            flexDirection: "row",
            justifyContent: "space-between",
          }}
        >
          <div>To pay today</div>
          <div>$1265.00</div>
        </Flex>
      </Radio>
      <Radio value="monthly" label="Pay monthly">
        <Flex
          style={{
            width: "100%",
            flexDirection: "row",
            justifyContent: "space-between",
          }}
        >
          <div>To pay today</div>
          <div>$316.25</div>
        </Flex>
        <Flex
          style={{
            width: "100%",
            flexDirection: "row",
            justifyContent: "space-between",
          }}
        >
          <div>10 monthly payments of</div>
          <div>$94.88</div>
        </Flex>
        <Divider />
        <Flex
          style={{
            width: "100%",
            flexDirection: "row",
            justifyContent: "space-between",
          }}
        >
          <div>
            <strong>Total</strong>
          </div>
          <div>
            <strong>$1265.00</strong>
          </div>
        </Flex>
      </Radio>
    </RadioGroup>
  ),
  args: {
    label: "Payment Options",
    isDisabled: false,
    isRequired: false,
    errorMessage: "",
    orientation: "vertical",
  },
};

export const HorizontalLayout: StoryType = {
  render: (args: RadioGroupProps) => (
    <RadioGroup {...args}>
      <Radio value="red" label="Red" />
      <Radio value="blue" label="Blue" />
    </RadioGroup>
  ),
  args: {
    label: "Color",
    isDisabled: false,
    isRequired: false,
    errorMessage: "",
    orientation: "horizontal",
  },
};

export const AutoStack: StoryType = {
  render: () => (
    <div>
      <p style={{ marginBottom: "20px" }}>
        With <code>autoStack</code> enabled, RadioGroup automatically changes
        from horizontal to vertical orientation when any radio label overflows.
        Resize the container to see it in action.
      </p>
      <div
        style={{
          maxWidth: "400px",
          border: "1px dashed #ccc",
          padding: "10px",
        }}
      >
        <RadioGroup
          label="Payment Options (with autoStack)"
          orientation="horizontal"
          autoStack
        >
          <Radio value="credit" label="Credit Card" />
          <Radio value="debit" label="Debit Card" />
        </RadioGroup>
      </div>
      <div
        style={{
          marginTop: "30px",
          maxWidth: "200px",
          border: "1px dashed #ccc",
          padding: "10px",
        }}
      >
        <RadioGroup
          label="Same options, narrower container"
          orientation="horizontal"
          autoStack
        >
          <Radio value="credit" label="Credit Card" />
          <Radio value="debit" label="Debit Card" />
        </RadioGroup>
      </div>
    </div>
  ),
};

export const WithHTMLLabels: StoryType = {
  render: (args: RadioGroupProps) => (
    <RadioGroup {...args}>
      <Radio
        value="residential"
        label={<TextOrHTML text="<strong>Residential</strong> locations" />}
      />
      <Radio
        value="commercial"
        label={<TextOrHTML text="<strong>Commercial</strong> locations" />}
      />
      <Radio
        value="mixed"
        label={<TextOrHTML text="<strong>Mixed-use</strong> locations" />}
      />
    </RadioGroup>
  ),
  args: {
    label: "Property type",
    isDisabled: false,
    isRequired: false,
    errorMessage: "",
    orientation: "vertical",
  },
  parameters: {
    docs: {
      description: {
        story:
          "Radio labels can contain HTML content using the TextOrHTML component. This is useful when labels need inline formatting like bold or italic text.",
      },
    },
  },
};

export default meta;
