import React, { Fragment } from 'react';
import { Button, Card, CardBody, Col, Row } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import FalconCardHeader from '../common/FalconCardHeader';
import FalconEditor from '../common/FalconEditor';
import PageHeader from '../common/PageHeader';
import Flex from '../common/Flex';

const basicFormCode = `<Form>
  <FormGroup>
    <Label for="exampleName">Name</Label>
    <Input type="text" name="name" id="exampleName" placeholder="Name" />
  </FormGroup>
  <FormGroup>
    <Label for="readonly">Read Only</Label>
    <Input type="text" name="readonly" id="readonly" placeholder="Readonly input here..." disabled />
  </FormGroup>
  <FormGroup>
    <Label for="exampleEmail">Read only plain text</Label>
    <Input plaintext value="email@example.com" onChange={() => {}} />
  </FormGroup>
  <FormGroup>
    <Label for="exampleEmail">Email</Label>
    <Input type="email" name="email" id="exampleEmail" placeholder="Email" />
  </FormGroup>
  <FormGroup>
    <Label for="examplePassword">Password</Label>
    <Input type="password" name="password" id="examplePassword" placeholder="Password" />
  </FormGroup>
  <FormGroup className="form-check">
    <Input type="checkbox" name="check" id="exampleCheck" />
    <Label for="exampleCheck" check>
      Checkbox
    </Label>
  </FormGroup>
  <FormGroup className="form-check">
    <Input type="checkbox" name="check" id="exampleCheck1" disabled />
    <Label for="exampleCheck1" check>
      Disabled checkbox
    </Label>
  </FormGroup>
  <FormGroup className="form-check">
  <Input type="radio" name="radio1" defaultChecked />
    <Label check>
      Default Radio
    </Label>
  </FormGroup>
  <FormGroup className="form-check">
   <Input type="radio" name="radio1" disabled /> 
    <Label check>
     Disabled Radio
    </Label>
  </FormGroup>
    <FormGroup>
      <Label for="exampleFile">Example file input</Label>
      <Input type="file" name="file" id="exampleFile" />
     </FormGroup>
  <FormGroup>
    <Label for="exampleSelect">Example Select</Label>
    <Input type="select" name="select" id="exampleSelect">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </Input>
  </FormGroup>
  <FormGroup>
    <Label for="exampleSelectMulti">Example Multiple Select</Label>
    <Input type="select" name="selectMulti" id="exampleSelectMulti" multiple>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </Input>
  </FormGroup>
  <FormGroup>
    <Label for="exampleText">Example textarea</Label>
    <Input type="textarea" name="text" id="exampleText" />
  </FormGroup>
  <Button color="primary">Save</Button>
</Form>`;

const inputGroupCode = `function InputGroupExample () {
  const [isOpenOne, setIsOpenOne] = useState(false);
  const [isOpenTwo, setIsOpenTwo] = useState(false);
  
  return (
    <div>
      <InputGroup>
        <InputGroupAddon addonType="prepend">@</InputGroupAddon>
        <Input placeholder="username" />
      </InputGroup>
      <br />
      <InputGroup>
        <Input placeholder="Recipient's username" />
        <InputGroupAddon addonType="append">
          <InputGroupText>@example.com</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
      <br />
      <Label for="yourVanityURl">Your vanity URL</Label>
      <InputGroup>
        <InputGroupAddon addonType="prepend">https:example.com/users/</InputGroupAddon>
        <Input />
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupAddon addonType="prepend">$</InputGroupAddon>
        <Input />
        <InputGroupAddon addonType="append">.00</InputGroupAddon>
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupAddon addonType="prepend">With textarea</InputGroupAddon>
        <Input type="textarea" />
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupAddon addonType="prepend">
          <InputGroupText>
            <Input addon type="checkbox" aria-label="Checkbox for following text input" />
          </InputGroupText>
        </InputGroupAddon>
        <Input />
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupAddon addonType="prepend">
          <InputGroupText>
            <Input addon type="radio" aria-label="Checkbox for following text input" />
          </InputGroupText>
        </InputGroupAddon>
        <Input />
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupAddon addonType="prepend">First and last name</InputGroupAddon>
        <Input />
        <Input />
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupAddon addonType="prepend">
          <InputGroupText>$</InputGroupText>
          <InputGroupText>0.00</InputGroupText>
        </InputGroupAddon>
        <Input />
      </InputGroup>
      <br />
      <InputGroup>
        <Input />
        <InputGroupAddon addonType="append">
          <InputGroupText>$</InputGroupText>
          <InputGroupText>0.00</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
      <br />
      <InputGroup>
        <InputGroupButtonDropdown 
          addonType="append"
          isOpen={isOpenOne} 
          toggle={() => setIsOpenOne(!isOpenOne)}
        >
          <DropdownToggle color="primary" caret>
            Dropdown
          </DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>Header</DropdownItem>
            <DropdownItem disabled>Action</DropdownItem>
            <DropdownItem>Something else here</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>Separated link</DropdownItem>
          </DropdownMenu>
        </InputGroupButtonDropdown>
        <Input />
      </InputGroup>
      <br />
      <InputGroup>
        <Input />
        <InputGroupButtonDropdown 
          addonType="append" 
          isOpen={isOpenTwo} 
          toggle={() => setIsOpenTwo(!isOpenTwo)}
        >
          <DropdownToggle color="primary" caret>
            Dropdown
          </DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>Header</DropdownItem>
            <DropdownItem disabled>Action</DropdownItem>
            <DropdownItem>Something else here</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>Separated link</DropdownItem>
          </DropdownMenu>
        </InputGroupButtonDropdown>
      </InputGroup>
    </div>
  )
}`;

const customCheckboxCode = `<Fragment>
  <CustomInput
    type="checkbox"
    id="customCheck1"
    label="Check this custom checkbox"
    className="mb-0"
    />
  <CustomInput 
    type="checkbox" 
    id="customCheck2" 
    label="Check another custom checkbox" 
  />
</Fragment>
`;
const customRadioCode = `<Fragment>
  <CustomInput
    type="radio"
    id="customRadio1"
    name="customRadio"
    label="Toggle this custom radio"
    className="mb-0"
  />
  <CustomInput
    type="radio"
    id="customRadio2"
    name="customRadio"
    label="Or toggle this other custom radio"
  />
</Fragment>`;

const InlineRadioCode = `<FormGroup>
  <Label for="selectOption">
    Select one option
  </Label>
  <div>
    <CustomInput 
      type="radio" 
      name="exampleCustomInlineRadio" 
      id="exampleCustomInlineRadio" 
      label="Toggle" 
      inline 
    />
    <CustomInput 
      type="radio" 
      name="exampleCustomInlineRadio" 
      id="exampleCustomInlineRadio2" 
      label="and another one" 
      inline 
    />
  </div>
</FormGroup>`;

const disabledInputFieldsCode = `<Fragment>
  <CustomInput
    type="checkbox"
    id="customCheckboxDisabled2"
    label="Check this custom checkbox"
    disabled
  />
  <CustomInput
    type="radio"
    id="customRadioDisabled2"
    name="radioDisabled"
    label="Toggle this custom radio"
    disabled
  />
</Fragment>`;

const customSwitchCode = `<CustomInput
    type="switch"
    id="customSwitch"
    name="customSwitch"
    label="Toggle this custom radio"
  />`;
const customSwitchDisabledCode = `<CustomInput
    type="switch"
    id="customSwitchDisabled2"
    name="customSwitch"
    label="Toggle this custom radio"
    disabled
  />`;
const customSelectCode = `<Fragment>
  <FormGroup>
    <CustomInput 
      type="select" 
      bsSize="lg" 
      defaultValue="1" 
      id="exampleCustomSelect1" 
      name="customSelect"
    >
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </CustomInput>
    </FormGroup>
    <FormGroup>
      <CustomInput 
        type="select" 
        id="exampleCustomSelect2" 
        defaultValue="1" 
        name="customSelect"
      >
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </CustomInput>
    </FormGroup>
    <FormGroup>
      <CustomInput 
        type="select" 
        bsSize="sm" 
        id="exampleCustomSelect3" 
        defaultValue="1" 
        name="customSelect"
      >
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </CustomInput>
  </FormGroup>
</Fragment>`;

const multipleSelectCode = `<Fragment>
<FormGroup>
  <CustomInput 
    type="select"
    id="exampleCustomMultipleSelect" 
    defaultValue={[1,2]} 
    name="customSelect" 
    multiple
  >
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
  </CustomInput>
</FormGroup>
</Fragment>`;

const fileBrowserCode = `<FormGroup>
  <Label for="exampleCustomFileBrowser">
    File Browser
  </Label>
  <CustomInput 
    type="file" 
    id="exampleCustomFileBrowser" 
    name="customFile" 
  />
</FormGroup>`;

const propertiesInput = `Input.propTypes = {
  children: PropTypes.node,
  // type can be things like text, password, (typical input types) as well as select and textarea, providing children as you normally would to those.
  type: PropTypes.string,
  size: PropTypes.string,
  bsSize: PropTypes.string,
  valid: PropTypes.bool, // applied the is-valid class when true, does nothing when false
  invalid: PropTypes.bool, // applied the is-invalid class when true, does nothing when false
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  // ref will only get you a reference to the Input component, use innerRef to get a reference to the DOM input (for things like focus management).
  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  plaintext: PropTypes.bool,
  addon: PropTypes.bool,
  className: PropTypes.string,
  cssModule: PropTypes.object,
};`;
const propertiesCustomInput = `CustomInput.propTypes = {
  className: PropTypes.string,
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  type: PropTypes.string.isRequired, // radio, checkbox, select, range.
  label: PropTypes.string, // used for checkbox and radios
  inline: PropTypes.bool,
  valid: PropTypes.bool, // applied the is-valid class when true, does nothing when false
  invalid: PropTypes.bool, // applied the is-invalid class when true, does nothing when false
  bsSize: PropTypes.string,
  cssModule: PropTypes.object,
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]), // for type="select"
  // innerRef would be referenced to select node or input DOM node, depends on type property
  innerRef: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.string,
    PropTypes.func,
  ])
};`;
const propertiesForm = `Form.propTypes = {
  children: PropTypes.node,
  inline: PropTypes.bool,
  // Pass in a Component to override default element
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), // default: 'form'
  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
  className: PropTypes.string,
  cssModule: PropTypes.object,
};`;
const propertiesFormFeedback = `FormFeedback.propTypes = {
  children: PropTypes.node,
  // Pass in a Component to override default element
  tag: PropTypes.string, // default: 'div'
  className: PropTypes.string,
  cssModule: PropTypes.object,
  valid: PropTypes.bool, // default: undefined
  tooltip: PropTypes.bool
};`;
const propertiesFormGroup = `FormGroup.propTypes = {
  children: PropTypes.node,
  // Applied the row class when true, does nothing when false
  row: PropTypes.bool,
  // Applied the form-check class when true, form-group when false
  check: PropTypes.bool,
  inline: PropTypes.bool,
  // Applied the disabled class when the check and disabled props are true, does nothing when false
  disabled: PropTypes.bool,
  // Pass in a Component to override default element
  tag: PropTypes.string, // default: 'div'
  className: PropTypes.string,
  cssModule: PropTypes.object,
};`;
const propertiesFormText = `FormText.propTypes = {
  children: PropTypes.node,
  inline: PropTypes.bool,
  // Pass in a Component to override default element
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), // default: 'small'
  color: PropTypes.string, // default: 'muted'
  className: PropTypes.string,
  cssModule: PropTypes.object,
};`;

const propertiesInputGroup = `InputGroup.propTypes = {
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  size: PropTypes.string,
  className: PropTypes.string
};`;

const propertiesInputGroupAddon = `InputGroupAddOn.propTypes = {
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
  className: PropTypes.string
};`;

const propertiesInputGroupButton = `InputGroupButton.propTypes = {
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
  children: PropTypes.node,
  groupClassName: PropTypes.string, // only used in shorthand
  groupAttributes: PropTypes.object, // only used in shorthand
  className: PropTypes.string
};`;

const Forms = () => (
  <Fragment>
    <PageHeader
      title="Forms"
      description="Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms."
      className="mb-3"
    >
      <Button
        tag="a"
        href="https://reactstrap.github.io/components/form"
        target="_blank"
        color="link"
        size="sm"
        className="pl-0"
      >
        Forms on reactstrap
        <FontAwesomeIcon icon="chevron-right" className="ml-1 fs--2" />
      </Button>
    </PageHeader>
    <Card className="mb-3">
      <FalconCardHeader title="Basic Form" light={false} />
      <CardBody className="bg-light">
        <FalconEditor code={basicFormCode} />
      </CardBody>
    </Card>
    <Card className="mb-3">
      <FalconCardHeader title="Properties" light={false} />
      <CardBody className="bg-light">
        <FalconEditor code={propertiesInput} hidePreview />
        <FalconEditor code={propertiesCustomInput} hidePreview />
        <FalconEditor code={propertiesForm} hidePreview />
        <FalconEditor code={propertiesFormFeedback} hidePreview />
        <FalconEditor code={propertiesFormGroup} hidePreview />
        <FalconEditor code={propertiesFormGroup} hidePreview />
        <FalconEditor code={propertiesFormText} hidePreview />
      </CardBody>
    </Card>
    <Card className="mb-3">
      <FalconCardHeader title="Input Group Properties" light={false} />
      <CardBody className="bg-light">
        <code className="bg-dark d-block p-2">
          <pre className="text-300">{propertiesInputGroup}</pre>
        </code>
        <code className="bg-dark d-block p-2">
          <pre className="text-300">{propertiesInputGroupAddon}</pre>
        </code>
        <code className="bg-dark d-block p-2">
          <pre className="text-300">{propertiesInputGroupButton}</pre>
        </code>
      </CardBody>
    </Card>
    <Card className="mb-3">
      <FalconCardHeader title="Input Group" light={false} />
      <CardBody className="bg-light">
        <FalconEditor code={inputGroupCode} language="jsx" />
      </CardBody>
    </Card>
    <PageHeader
      title="Custom Forms"
      description="For even more customization and cross-browser consistency, use Bootstrap's completely custom form elements to replace the browser defaults."
      className="mb-3"
    >
      <Button
        tag="a"
        href="https://reactstrap.github.io/components/form#Custom-Inputs"
        target="_blank"
        color="link"
        size="sm"
        className="pl-0"
      >
        Custom Forms on reactstrap
        <FontAwesomeIcon icon="chevron-right" className="ml-1 fs--2" />
      </Button>
    </PageHeader>
    <Row noGutters className="mb-3">
      <Col lg={6} className="pr-lg-2 mb-3">
        <Card className="h-100 mb-2">
          <FalconCardHeader title="Checkboxes" light={false} />
          <CardBody className="bg-light">
            <FalconEditor code={customCheckboxCode} language="jsx" />
          </CardBody>
        </Card>
      </Col>
      <Col lg={6} className="pl-lg-2 mb-3">
        <Card className="h-100">
          <FalconCardHeader title="Radios" light={false} />
          <CardBody className="bg-light">
            <FalconEditor code={customRadioCode} language="jsx" />
          </CardBody>
        </Card>
      </Col>
      <Col lg={6} className="pr-lg-2 mb-3">
        <Card className="h-100">
          <FalconCardHeader title="Inline Radios" light={false} />
          <CardBody className="bg-light">
            <FalconEditor code={InlineRadioCode} scope={{ Flex }} />
          </CardBody>
        </Card>
      </Col>
      <Col lg={6} className="pl-lg-2 mb-3">
        <Card className="h-100">
          <FalconCardHeader title="Disabled" light={false} />
          <CardBody className="bg-light">
            <FalconEditor code={disabledInputFieldsCode} language="jsx" />
          </CardBody>
        </Card>
      </Col>
      <Col lg={6} className="pr-lg-2 mb-3">
        <Card className="h-100">
          <FalconCardHeader title="Switches" light={false} />
          <CardBody className="bg-light">
            <FalconEditor code={customSwitchCode} />
          </CardBody>
        </Card>
      </Col>
      <Col lg={6} className="pl-lg-2 mb-3">
        <Card className="h-100">
          <FalconCardHeader title="Disabled Switches" light={false} />
          <CardBody className="bg-light">
            <FalconEditor code={customSwitchDisabledCode} language="jsx" />
          </CardBody>
        </Card>
      </Col>
      <Col lg={6} className="pr-lg-2">
        <Card className="h-100">
          <FalconCardHeader title="Custom Select" light={false} />
          <CardBody className="bg-light">
            <FalconEditor code={customSelectCode} language="jsx" />
          </CardBody>
        </Card>
      </Col>
      <Col lg={6} className="pl-lg-2">
        <Card className="mb-3">
          <FalconCardHeader title="Multiple Select" light={false} />
          <CardBody className="bg-light">
            <FalconEditor code={multipleSelectCode} language="jsx" />
          </CardBody>
        </Card>
        <Card className="">
          <FalconCardHeader title="File Browser" light={false} />
          <CardBody className="bg-light">
            <FalconEditor code={fileBrowserCode} language="jsx" />
          </CardBody>
        </Card>
      </Col>
    </Row>
  </Fragment>
);

export default Forms;