import React from "react";
import { Meta, Story } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import {
  OrganismUploadFile,
  IUploadFileProps,
} from "react/organisms/UploadFile";
import { theme } from "data/dataMx";

const meta: Meta = {
  title: "React/organisms/UploadFile",
  component: OrganismUploadFile,
  argTypes: {
    colorProgress: {
      control: {
        type: "select",
      },
      options: Object.keys(theme),
    },
    handleClick: {
      table: {
        disable: true,
      },
    },
  },
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const TemplateUploadFile: Story<IUploadFileProps> = (props) => {
  return (
    <div style={{ width: "400px", margin: "0 auto" }}>
      <OrganismUploadFile {...props} />
    </div>
  );
};

export const UploadFile = TemplateUploadFile.bind({});

UploadFile.args = {
  headerText: "Upload a receipt",
  captionText: "Tell us your Bud Light drink of choice.",
  placeholderText: "Drag and drop files here",
  acceptedFormatText: "JPG, PNG (Max size: 4 MB)",
  hasError: false,
  hasSuccess: false,
  errorMessage:
    "Your receipt failed to upload, try again! Remember the Max size is 4MB and our system only supports JPG and PNG.",
  successMessage:
    "Your receipt was successfully uploaded, please wait for the validation of your receipt for up to 48 hours.",
  onChange: action("Changed"),
  onRemove: action("Removed"),
  onSubmitFile: (file: Object) => {
    console.log("FILE", file);
  },
  onError: action("ERROR"),
  captionProps: {
    size: "large",
  },
  placeholderProps: {
    size: "medium",
  },
};
