import React from "react";
import ModalTextAreaField from "../../app/(app)/create/components/ModalTextAreaField";

export default {
  title: "Create Flow/ModalTextAreaField",
  component: ModalTextAreaField,
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component:
          "Shared labelled text area for create-flow modal sections. With `generateDraftText`, matches Figma Step Modal (23746:49780): tall compose field plus Generate draft.",
      },
    },
  },
  argTypes: {
    label: { control: { type: "text" } },
    placeholder: { control: { type: "text" } },
    rows: { control: { type: "number" } },
    helpIcon: { control: { type: "boolean" } },
    disabled: { control: { type: "boolean" } },
    onChange: { action: "change" },
  },
  tags: ["autodocs"],
};

export const Default = {
  render: (args) => {
    const [value, setValue] = React.useState("");
    return (
      <div className="w-[520px]">
        <ModalTextAreaField {...args} value={value} onChange={setValue} />
      </div>
    );
  },
  args: {
    label: "Description",
    helpIcon: false,
    placeholder: "What does this rule cover?",
    rows: 4,
  },
};

export const WithValue = {
  render: () => {
    const [value, setValue] = React.useState(
      "We decide together whenever a change would affect more than two teams.",
    );
    return (
      <div className="w-[520px]">
        <ModalTextAreaField
          label="Core principle"
          value={value}
          onChange={setValue}
        />
      </div>
    );
  },
};

export const GenerateDraft = {
  render: () => {
    const [value, setValue] = React.useState("");
    return (
      <div className="w-[520px]">
        <ModalTextAreaField
          label="What does this value mean to your group?"
          value={value}
          onChange={setValue}
          placeholder="Describe how this method should work"
          generateDraftText="We design spaces and tools that everyone can use regardless of ability or background."
          generateDraftLabel="Generate draft"
          generateDraftHint="Get a first draft for this section"
        />
      </div>
    );
  },
};

export const Disabled = {
  render: () => (
    <div className="w-[520px]">
      <ModalTextAreaField
        label="Description"
        value="Read-only content"
        onChange={() => {}}
        disabled
      />
    </div>
  ),
};