import React from "react";
import { Decorator, Meta, StoryFn } from "@storybook/react";
import { omit } from "lodash-es";

import { Textarea, ThemeProviderWithStyledEngine } from "../index";
import inputStory from "./Input.stories";

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>{Story()}</ThemeProviderWithStyledEngine>
);

const meta = {
  title: "Components/Inputs/Textarea",
  component: Textarea,
  decorators: [decorator],
  argTypes: {
    rows: {
      name: "Fixed amount of rows",
      type: "number",
    },
    minRows: {
      name: "Minimum amount of rows",
      type: "number",
    },
    maxRows: {
      name: "Maximum amount of rows",
      type: "number",
    },
    ...omit(inputStory.argTypes, [
      "errorText",
      "leftIcon",
      "rightIcon",
      "rightButtonIcon",
      "rightButtonClickable",
      "rightButtonTooltip",
    ]),
  },
} satisfies Meta<typeof Textarea>;

export default meta;

const Template: StoryFn<typeof Textarea> = (args) => {
  return <Textarea {...args} />;
};

export const Default: StoryFn<typeof Textarea> = Template.bind({});

Default.args = {
  rows: undefined,
  minRows: 2,
  maxRows: 4,
  fullWidth: true,
  variant: "outlined",
  label: "Life goals",
  placeholder: "I would really like to...",
  required: false,
  error: false,
  disabled: false,
  height: "40",
};
