import React from "react";
import { Story, Meta } from "@storybook/react";
import { StoryLayout } from "../../../../.storybook/StoryComponents";
import Input from "../Input";
import { InputProps } from "../types";
import { InputDocs } from "./InputDocs";

export default {
  title: "Atoms/Input",
  parameters: {
    docs: {
      page: InputDocs,
    },
  },
  component: Input,
} as Meta;

export const Default: Story<InputProps> = args => {
  return (
    <StoryLayout>
      <Input {...args} required />
    </StoryLayout>
  );
};
export const WithSuffix: Story<InputProps> = args => {
  return (
    <StoryLayout>
      <Input {...args} required suffix={"₽"} />
    </StoryLayout>
  );
};
export const WithDate: Story<InputProps> = args => {
  return (
    <StoryLayout>
      <Input.Date {...args} required />
    </StoryLayout>
  );
};

Default.args = {
  year: "2022",
  placeholder: "placeholder",
};

Default.argTypes = {
  year: {
    options: ["2020", "2022"],
    control: { type: "select" },
  },
  disabled: {
    options: [true, false],
    control: { type: "radio" },
  },
  placeholder: {
    defaultValue: "placeholder",
    control: {
      type: "placeholder",
    },
  },
  value: {
    defaultValue: "text",
    control: {
      type: "text",
    },
  },
  status: {
    defaultValue: "",
    options: ["error", "default"],
    control: {
      type: "select",
    },
  },
};
WithSuffix.args = {
  year: "2022",
  placeholder: "placeholder",
};

WithSuffix.argTypes = {
  year: {
    options: ["2020", "2022"],
    control: { type: "select" },
  },
  disabled: {
    options: [true, false],
    control: { type: "radio" },
  },
  placeholder: {
    defaultValue: "placeholder",
    control: {
      type: "placeholder",
    },
  },
  value: {
    defaultValue: "text",
    control: {
      type: "text",
    },
  },
  status: {
    defaultValue: "",
    options: ["error", "default"],
    control: {
      type: "select",
    },
  },
};

WithDate.argTypes = {
  disabled: {
    options: [true, false],
    control: { type: "radio" },
  },
  status: {
    defaultValue: "",
    options: ["error", "default"],
    control: {
      type: "select",
    },
  },
};