import * as React from "react";
import { StoryFn, Meta } from "@storybook/react";
import {
  FormMessage,
  FormSection,
  FormSectionBody,
  FormSectionFooter,
  FormSectionHeader,
  FormSubSection,
  FormTitle
} from "../";
import { Container } from "../../styleUtils/layout";
import { TextInput } from "../../textInput";
import { Textarea } from "../../textarea";
import { ToggleInputList } from "../../toggleInputList";
import { SelectInput } from "../../selectInput";
import { SecondaryButton } from "../../button";
import { SystemIcons } from "../../icons/dist/system-icons-enum";
import { CaptionText } from "../../styleUtils/typography";

const onAddSubSection = () => {
  alert("another box would be added");
};
const onRemoveSubSection = () => {
  alert("the box would be removed");
};

export default {
  title: "Forms/Form structure",
  subcomponents: {
    FormMessage,
    FormSection,
    FormSectionBody,
    FormSectionFooter,
    FormSectionHeader,
    FormSubSection,
    FormTitle
  }
} as Meta;

const Template: StoryFn = args => (
  <Container>
    <FormTitle {...args}>Form Title</FormTitle>
    <div>Form sections go here</div>
  </Container>
);

export const Default = {
  render: Template
};

export const _FormMessage = {
  render: args => {
    return (
      <Container>
        <FormMessage {...args}>
          Use the Control panel to change the appearance of the message.
        </FormMessage>
        <FormTitle {...args}>Form Title</FormTitle>
        <div>Form sections go here</div>
      </Container>
    );
  }
};

export const _FormSection = {
  render: args => (
    <Container>
      <FormSection>
        <FormSectionBody>
          <TextInput inputLabel="Name" id="name" />
          <TextInput inputLabel="Role" id="role" />
          <TextInput inputLabel="City" id="city" />
        </FormSectionBody>
      </FormSection>
    </Container>
  )
};

export const FormSectionWithHeaderAndFooter = {
  render: args => (
    <Container>
      <FormSection>
        <FormSectionHeader
          title="Form Section"
          subtitle="This is an optional subtitle that provides more detail about this section of the form"
        />
        <FormSectionBody>
          <TextInput inputLabel="Name" id="name" />
          <TextInput inputLabel="Role" id="role" />
          <TextInput inputLabel="City" id="city" />
        </FormSectionBody>
        <FormSectionFooter>
          <CaptionText>
            Here is a caption with supporting info about this section of the
            form
          </CaptionText>
        </FormSectionFooter>
      </FormSection>
    </Container>
  )
};

export const _FormSubSection = {
  render: args => (
    <Container>
      <FormSubSection>
        <TextInput inputLabel="Name" id="name" />
        <TextInput inputLabel="Role" id="role" />
        <TextInput inputLabel="City" id="city" />
      </FormSubSection>
    </Container>
  )
};

export const RelatedFormSubSectionsGroupedInAFormSection = {
  render: args => (
    <Container>
      <FormSection>
        <FormSectionHeader
          title="Team Members"
          subtitle="The details you provide will be used to create each team member to your specifications"
        />
        <FormSectionBody>
          <FormSubSection onRemove={onRemoveSubSection}>
            <TextInput inputLabel="Name" id="name.1" />
            <TextInput inputLabel="Role" id="role.1" />
            <TextInput inputLabel="City" id="city.1" />
          </FormSubSection>
          <FormSubSection onRemove={onRemoveSubSection}>
            <TextInput inputLabel="Name" id="name.2" />
            <TextInput inputLabel="Role" id="role.2" />
            <TextInput inputLabel="City" id="city.2" />
          </FormSubSection>
        </FormSectionBody>
      </FormSection>
    </Container>
  )
};

export const ExampleFormLayout = {
  render: args => (
    <Container>
      <FormMessage appearance="warning">
        There are already a bunch of teams. Are you sure you want another one?
      </FormMessage>
      <FormTitle>Team Generator</FormTitle>
      <FormSection>
        <FormSectionBody>
          <TextInput
            inputLabel="Name"
            hintContent="Names must be alphanumeric"
            id="name"
          />
          <Textarea inputLabel="Description" id="teamDesc" />
          <SelectInput
            inputLabel="Methodology"
            options={[
              { value: "agile", label: "Agile" },
              { value: "kanban", label: "Kanban" },
              { value: "scrumban", label: "Scrumban" },
              { value: "somethingElse", label: "Something else" }
            ]}
            id="region"
          />
          <ToggleInputList
            listLabel="Languages used"
            items={[
              { inputLabel: "Go", id: "go", value: "go" },
              { inputLabel: "JavaScript", id: "js", value: "js" },
              { inputLabel: "Python", id: "python", value: "python" },
              { inputLabel: "Ruby", id: "ruby", value: "ruby" }
            ]}
            id="languages"
          />
        </FormSectionBody>
      </FormSection>
      <FormSection>
        <FormSectionHeader
          title="Team Members"
          subtitle="The details you provide will be used to create each team member to your specifications"
        />
        <FormSectionBody>
          <FormSubSection onRemove={onRemoveSubSection}>
            <TextInput inputLabel="Name" id="name.1" />
            <TextInput inputLabel="Role" id="role.1" />
            <TextInput inputLabel="City" id="city.1" />
          </FormSubSection>
          <FormSubSection onRemove={onRemoveSubSection}>
            <TextInput inputLabel="Name" id="name.2" />
            <TextInput inputLabel="Role" id="role.2" />
            <TextInput inputLabel="City" id="city.2" />
          </FormSubSection>
          <SecondaryButton
            iconStart={SystemIcons.Plus}
            onClick={onAddSubSection}
          >
            Add a team member
          </SecondaryButton>
        </FormSectionBody>
      </FormSection>
    </Container>
  )
};