import React from 'react';
import Checkbox from '../Checkbox';
import Form from './Form';
import FormGroup from '../FormGroup';
import FileUploader from '../FileUploader';
import Dropzone from 'react-dropzone';
import NumberInput from '../NumberInput';
import RadioButton from '../RadioButton';
import InputGroup from '../InputGroup';
import Button from '../Button';
import Search from '../Search';
import Select from '../Select';
import SelectItem from '../SelectItem';
import TextArea from '../TextArea';
import TextInput from '../TextInput';
import Toggle from '../Toggle';
import markdown from './README.mdx';
export default {
  title: 'Components/Forms/Form',
  component: Form,
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: markdown
  }
};
export var Default = function Default(args) {
  return /*#__PURE__*/React.createElement(Form, args, /*#__PURE__*/React.createElement(TextInput, {
    id: "testinput",
    labelText: "Text Input label",
    placeholder: "Placeholder text"
  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(TextArea, {
    labelText: "Text Area label",
    placeholder: "Placeholder text",
    id: "textarea5",
    cols: 50,
    rows: 3
  }), /*#__PURE__*/React.createElement(Select, {
    id: "select-12",
    defaultValue: "placeholder-item"
  }, /*#__PURE__*/React.createElement(SelectItem, {
    disabled: true,
    hidden: true,
    value: "placeholder-item",
    text: "Choose an option"
  }), /*#__PURE__*/React.createElement(SelectItem, {
    value: "option-1",
    text: "Option 1"
  }), /*#__PURE__*/React.createElement(SelectItem, {
    value: "option-2",
    text: "Option 2"
  }), /*#__PURE__*/React.createElement(SelectItem, {
    value: "option-3",
    text: "Option 3"
  })), /*#__PURE__*/React.createElement(Button, {
    type: "submit",
    className: "some-class"
  }, "Submit"));
};
Default.args = {
  children: 'Form',
  className: 'some-class',
  longForm: true
};
export var DetailedForm = function DetailedForm(args) {
  return /*#__PURE__*/React.createElement(Form, args, /*#__PURE__*/React.createElement(FormGroup, {
    legendText: "Checkbox heading"
  }, /*#__PURE__*/React.createElement(Checkbox, {
    defaultChecked: true,
    labelText: "Checkbox label",
    id: "checkbox-0"
  }), /*#__PURE__*/React.createElement(Checkbox, {
    labelText: "Checkbox label2",
    id: "checkbox-1"
  }), /*#__PURE__*/React.createElement(Checkbox, {
    disabled: true,
    labelText: "Checkbox label3",
    id: "checkbox-2"
  })), /*#__PURE__*/React.createElement(NumberInput, {
    id: "number-input-1",
    label: "Number Input",
    labelText: "Text Input label",
    min: 0,
    max: 100,
    value: 50,
    step: 10
  }), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Toggle, {
    id: "toggle-1"
  }), /*#__PURE__*/React.createElement(Toggle, {
    disabled: true,
    id: "toggle-2"
  })), /*#__PURE__*/React.createElement(FormGroup, {
    legendText: "File Upload Types"
  }, /*#__PURE__*/React.createElement("p", null, "Legacy FileUploader"), /*#__PURE__*/React.createElement(FileUploader, {
    id: "file-1",
    labelDescription: "Choose Files...",
    buttonLabel: "Add files",
    labelText: "Legacy"
  }), /*#__PURE__*/React.createElement("p", null, "Drag and Drop File Uploader"), /*#__PURE__*/React.createElement(Dropzone, {
    onDrop: function onDrop(acceptedFiles) {
      return acceptedFiles;
    }
  }, function (_ref) {
    var getRootProps = _ref.getRootProps,
        getInputProps = _ref.getInputProps;
    return /*#__PURE__*/React.createElement("section", {
      className: "wfp--dropzone"
    }, /*#__PURE__*/React.createElement("div", getRootProps({
      className: 'wfp--dropzone__input'
    }), /*#__PURE__*/React.createElement("input", getInputProps()), /*#__PURE__*/React.createElement("div", null, "Drag 'n' drop some files here, or click to select files")));
  })), /*#__PURE__*/React.createElement(FormGroup, {
    legendText: "Radio Button heading"
  }, /*#__PURE__*/React.createElement(InputGroup, {
    name: "input-group",
    defaultSelected: "default-selected"
  }, /*#__PURE__*/React.createElement(RadioButton, {
    value: "standard",
    id: "radio-1",
    labelText: "Standard Radio Button"
  }), /*#__PURE__*/React.createElement(RadioButton, {
    value: "default-selected",
    labelText: "Default Selected Radio Button",
    id: "radio-2"
  }), /*#__PURE__*/React.createElement(RadioButton, {
    value: "blue",
    labelText: "Standard Radio Button",
    id: "radio-3"
  }), /*#__PURE__*/React.createElement(RadioButton, {
    value: "disabled",
    labelText: "Disabled Radio Button",
    id: "radio-4",
    disabled: true
  }))), /*#__PURE__*/React.createElement(FormGroup, {
    legendText: "Radio Button heading"
  }, /*#__PURE__*/React.createElement(Search, {
    id: "search-1",
    labelText: "Search",
    placeHolderText: "Search"
  })), /*#__PURE__*/React.createElement(Select, {
    id: "select-1",
    defaultValue: "placeholder-item"
  }, /*#__PURE__*/React.createElement(SelectItem, {
    disabled: true,
    hidden: true,
    value: "placeholder-item",
    text: "Choose an option"
  }), /*#__PURE__*/React.createElement(SelectItem, {
    value: "option-1",
    text: "Option 1"
  }), /*#__PURE__*/React.createElement(SelectItem, {
    value: "option-2",
    text: "Option 2"
  }), /*#__PURE__*/React.createElement(SelectItem, {
    value: "option-3",
    text: "Option 3"
  })), /*#__PURE__*/React.createElement(TextInput, {
    id: "test2",
    labelText: "Text Input label",
    placeholder: "Placeholder text"
  }), /*#__PURE__*/React.createElement(TextInput, {
    type: "password",
    required: true,
    pattern: "(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{6,}",
    id: "test3",
    labelText: "Password"
  }), /*#__PURE__*/React.createElement(TextInput, {
    type: "password",
    required: true,
    pattern: "(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{6,}",
    id: "test4",
    labelText: "Password",
    invalid: true,
    invalidText: "Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number."
  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(TextArea, {
    labelText: "Text Area label",
    placeholder: "Placeholder text",
    id: "test5",
    cols: 50,
    rows: 4
  }), /*#__PURE__*/React.createElement(Button, {
    type: "submit",
    className: "some-class"
  }, "Submit"));
};
DetailedForm.args = {
  children: 'Form',
  className: 'some-class',
  longForm: true
};
export var Login = function Login(args) {
  return /*#__PURE__*/React.createElement(Form, args, /*#__PURE__*/React.createElement(FormGroup, {
    legendText: "Login Form Example"
  }, /*#__PURE__*/React.createElement(TextInput, {
    type: "email",
    id: "email1",
    labelText: "Email",
    placeholder: "c*****@wfp.org"
  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(TextInput, {
    type: "password",
    required: true,
    pattern: "(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{6,}",
    id: "password2",
    labelText: "Password"
  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
    type: "submit",
    className: "some-class"
  }, "Submit")));
};
Login.args = {
  longForm: false
};
export var Contact = function Contact(args) {
  return /*#__PURE__*/React.createElement(Form, args, /*#__PURE__*/React.createElement(FormGroup, {
    align: "horizontal",
    legendText: "Contact Form Example: name"
  }, /*#__PURE__*/React.createElement(TextInput, {
    type: "text",
    id: "firstname",
    labelText: "Firstname",
    placeholder: "Noami"
  }), /*#__PURE__*/React.createElement(TextInput, {
    type: "text",
    id: "lastname",
    labelText: "lastname",
    placeholder: "ADAMS"
  })), /*#__PURE__*/React.createElement(TextInput, {
    type: "email",
    id: "email4",
    labelText: "Email",
    placeholder: "c******@wfp.org"
  }), /*#__PURE__*/React.createElement(FormGroup, {
    legendText: "Additional details"
  }, /*#__PURE__*/React.createElement(TextArea, {
    labelText: "Message",
    placeholder: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    id: "test5",
    cols: 50,
    rows: 5
  })), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
    type: "button",
    kind: "secondary"
  }, "cancel"), /*#__PURE__*/React.createElement(Button, {
    type: "submit",
    className: "some-class"
  }, "Send")));
};