import { search } from "@simplybusiness/icons";
import type { Meta, StoryObj } from "@storybook/react";
import { useRef } from "react";
import { excludeControls } from "../../utils";
import { StoryContainer } from "../../utils/StoryContainer";
import { Button } from "../Button";
import { Icon } from "../Icon";
import { Segment, SegmentGroup } from "../Segment";
import { Text } from "../Text";
import type { TextFieldProps } from "./TextField";
import { TextField } from "./TextField";

type StoryType = StoryObj<typeof TextField>;

const meta: Meta<typeof TextField> = {
  title: "Forms/TextField",
  component: TextField,
  excludeStories: ["ExampleHorizontal"],
  argTypes: {
    type: {
      options: ["text", "password", "email", "tel", "url", "hidden"],
      control: { type: "radio" },
    },
    ...excludeControls(
      "description",
      "prefixInside",
      "prefixOutside",
      "suffixInside",
      "suffixOutside",
      "validationState",
    ),
  },
  args: {
    isRequired: false,
    isReadOnly: false,
  },
  decorators: [
    Story => (
      <StoryContainer>
        <Story />
      </StoryContainer>
    ),
  ],
};

export const Default: StoryType = {
  render: (args: TextFieldProps) => <TextField {...args} />,
  args: {
    label: "First name",
    placeholder: "",
    type: "text",
    isDisabled: false,
    errorMessage: "",
  },
};

export const Placeholder: StoryType = {
  render: (args: TextFieldProps) => <TextField {...args} />,
  args: {
    label: "Email",
    placeholder: "email@example.com",
    type: "text",
    isDisabled: false,
    errorMessage: "",
  },
};

export const ControlledValue: StoryType = {
  render: (args: TextFieldProps) => <TextField {...args} />,
  args: {
    label: "First name",
    placeholder: "",
    defaultValue: "john.doe@email.com",
    type: "text",
    isDisabled: false,
    errorMessage: "",
  },
};

export const ReadOnly: StoryType = {
  render: (args: TextFieldProps) => <TextField {...args} />,
  args: {
    label: "First name",
    isReadOnly: true,
    isRequired: true,
    defaultValue: "John",
    type: "text",
    prefixInside: <Icon icon={search} />,
  },
};

export const Disabled: StoryType = {
  render: (args: TextFieldProps) => <TextField {...args} />,
  args: {
    label: "First name",
    placeholder: "",
    defaultValue: "John",
    type: "text",
    isDisabled: true,
    prefixInside: <Icon icon={search} />,
    errorMessage: "",
  },
};

export const Valid: StoryType = {
  render: (args: TextFieldProps) => <TextField {...args} />,
  args: {
    label: "First name",
    placeholder: "",
    defaultValue: "john.doe@email.com",
    type: "text",
    isDisabled: false,
    isInvalid: false,
    errorMessage: "",
  },
};

export const Hidden: StoryType = {
  render: (args: TextFieldProps) => <TextField {...args} />,
  args: {
    label: "Secret",
    placeholder: "",
    defaultValue: "",
    type: "hidden",
    isDisabled: false,
    errorMessage: "",
  },
};

export const Invalid: StoryType = {
  render: (args: TextFieldProps) => <TextField {...args} />,
  args: {
    label: "First name",
    placeholder: "",
    defaultValue: "john.doe@email.com",
    type: "text",
    isDisabled: false,
    isInvalid: true,
    prefixInside: <Icon icon={search} />,
    errorMessage: "This is an error message",
  },
};

export const WithChildren: StoryType = {
  render: (args: TextFieldProps) => <TextField {...args} />,
  args: {
    label: "First name",
    placeholder: "",
    type: "text",
    isDisabled: false,
    errorMessage: "",
    children: <Text>A custom component</Text>,
  },
};

export const WithPrefixInside: StoryType = {
  render: (args: TextFieldProps) => <TextField {...args} />,
  args: {
    label: "What is your specific trade/profession?",
    placeholder: "",
    type: "text",
    isRequired: true,
    isDisabled: false,
    errorMessage: "",
    prefixInside: <Icon icon={search} />,
  },
};

export const WithPrefixAndSuffixInside: StoryType = {
  render: (args: TextFieldProps) => <TextField {...args} />,
  args: {
    label: "Amount",
    placeholder: "",
    type: "text",
    isRequired: true,
    isDisabled: false,
    errorMessage: "",
    prefixInside: <Text variant="body">$</Text>,
    suffixInside: <Text variant="body">.00</Text>,
  },
};

export const WithPrefixInsideAndSuffixOutside: StoryType = {
  render: (args: TextFieldProps) => <TextField {...args} />,
  args: {
    label: "What does your business do?",
    placeholder: "",
    type: "text",
    isRequired: true,
    isDisabled: false,
    errorMessage: "",
    prefixInside: <Icon icon={search} />,
    suffixOutside: <Button>Get Started</Button>,
  },
};

export const WithPrefixOutsideAndSuffixInside: StoryType = {
  render: (args: TextFieldProps) => <TextField {...args} />,
  args: {
    label: "What is your specific trade/profession?",
    placeholder: "",
    type: "text",
    isRequired: true,
    isDisabled: false,
    errorMessage: "",
    prefixOutside: <Button>Start your quote</Button>,
    suffixInside: <Icon icon={search} />,
  },
};

export const WithPrefixOutside: StoryType = {
  render: (args: TextFieldProps) => <TextField {...args} />,
  args: {
    label: "Link",
    placeholder: "",
    type: "text",
    isDisabled: false,
    isRequired: true,
    errorMessage: "",
    prefixOutside: <Text variant="body">https://</Text>,
  },
};

export const WithSuffixOutside: StoryType = {
  render: (args: TextFieldProps) => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const fieldRef = useRef<HTMLInputElement>(null);

    return (
      <TextField
        {...args}
        ref={fieldRef}
        suffixOutside={
          <Button
            variant="primary"
            onClick={async () => {
              try {
                const value = fieldRef.current?.value;
                await navigator.clipboard.writeText(value || "");

                alert(`Copied to clipboard: ${value}`);
              } catch (err) {
                console.error("Failed to copy: ", err);
              }
            }}
          >
            Copy
          </Button>
        }
      />
    );
  },
  args: {
    label: "Reference number",
    placeholder: "",
    type: "text",
    isRequired: true,
    isDisabled: false,
    errorMessage: "",
    defaultValue: "REF123A456",
  },
};

export const ExampleHorizontal = () => (
  <SegmentGroup horizontal>
    <Segment>
      <TextField label="First name" />
    </Segment>
    <Segment>
      <TextField label="Last name" />
    </Segment>
  </SegmentGroup>
);

export default meta;
