import React, { useState } from 'react';
import {
  Row,
  Col,
  Button,
  ButtonGroup,
  ButtonToolbar,
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from 'reactstrap';

import Widget from '../../../components/Widget';

const Buttons = () => {
  const [state, setState] = useState({
    dropdownOpenOne: false,
    dropdownOpenTwo: false,
    dropdownOpenThree: false,
    dropdownOpenFour: false,
    cSelectedOne: [2],
    cSelectedTwo: [1, 3],
    rSelectedTwo: 2,
    rSelectedOne: null,
  });

  const onRadioBtnClickOne = (rSelectedOne) => {
    setState((prevState) => ({
      ...prevState,
      rSelectedOne,
    }));
  };

  const onRadioBtnClickTwo = (rSelectedTwo) => {
    setState((prevState) => ({
      ...prevState,
      rSelectedTwo,
    }));
  };

  const onCheckboxBtnClickOne = (selected) => {
    setState((prevState) => {
      const cSelectedOne = prevState.cSelectedOne.includes(selected)
        ? prevState.cSelectedOne.filter((item) => item !== selected)
        : [...prevState.cSelectedOne, selected];

      return {
        ...prevState,
        cSelectedOne,
      };
    });
  };

  const onCheckboxBtnClickTwo = (selected) => {
    setState((prevState) => {
      const cSelectedTwo = prevState.cSelectedTwo.includes(selected)
        ? prevState.cSelectedTwo.filter((item) => item !== selected)
        : [...prevState.cSelectedTwo, selected];

      return {
        ...prevState,
        cSelectedTwo,
      };
    });
  };

  const toggleOne = () => {
    setState((prevState) => ({
      ...prevState,
      dropdownOpenOne: !prevState.dropdownOpenOne,
    }));
  };

  const toggleTwo = () => {
    setState((prevState) => ({
      ...prevState,
      dropdownOpenTwo: !prevState.dropdownOpenTwo,
    }));
  };

  const toggleThree = () => {
    setState((prevState) => ({
      ...prevState,
      dropdownOpenThree: !prevState.dropdownOpenThree,
    }));
  };

  const toggleFour = () => {
    setState((prevState) => ({
      ...prevState,
      dropdownOpenFour: !prevState.dropdownOpenFour,
    }));
  };

  return (
      <div>

        <h1 className="page-title">Buttons - <span className="fw-semi-bold">Styles </span></h1>

        <Row>
          {/* Color options */}
          <Col md={6} sm={12} xs={12}>
            <Widget
              title={<h5> Color <span className="fw-semi-bold">Options</span>
              </h5>} close collapse
            >
              <div>
                <p className="fs-mini text-muted">
                  Use any of the available button classes to quickly create a styled button.
                  Semantically distinguishable beauty.
                </p>
                <p className="text-start">
                  <Button color="default" className="width-100 mb-3 me-3">Default</Button>
                  <Button color="primary" className="width-100 mb-3 me-3">Primary</Button>
                  <Button color="info" className="width-100 mb-3 me-3">Info</Button>
                  <Button color="success" className="width-100 mb-3 me-3">Success</Button>
                  <Button color="warning" className="width-100 mb-3 me-3">Warning</Button>
                  <Button color="danger" className="width-100 mb-3 me-3">Danger</Button>
                  <Button color="gray" className="width-100 mb-3 me-3">Gray</Button>
                  <Button color="inverse" className="width-100 mb-3 me-3">Dark</Button>
                </p>
              </div>
            </Widget>
          </Col>

          {/* Size variants */}
          <Col md={6} sm={12} xs={12}>
            <Widget
              title={<h5> Size <span className="fw-semi-bold">Variants</span>
              </h5>} close collapse
            >
              <div>
                <p className="fs-mini text-muted">
                  Fancy larger or smaller buttons?
                  Four separate sizes available for all use cases:
                  from tiny 10px button to large one.
                </p>
                <p>
                  <Button color="default" size="lg" className="mb-3 me-3">Large button</Button>
                  <Button color="primary" className="mb-3 me-3">Default button</Button>
                  <Button color="info" size="sm" className="mb-3 me-3">Small button</Button>
                  <Button color="success" size="xs" className="mb-3 me-3">Tiny button</Button>
                </p>
              </div>
            </Widget>
          </Col>

          <Col md={6} sm={12} xs={12}>
            <Widget
              title={<h5>Outline <span className="fw-semi-bold">Buttons</span>
              </h5>} close collapse
            >
              <div>
                <p className="fs-mini">
                  In need of a button, but not the hefty background colors they bring?
                  Use <code>outline</code> property to remove all
                  background images and colors on any button.
                </p>
                <p>
                  <Button outline color="default" className="width-100 mb-3 me-3">Default</Button>
                  <Button outline color="primary" className="width-100 mb-3 me-3">Primary</Button>
                  <Button outline color="info" className="width-100 mb-3 me-3">Info</Button>
                  <Button outline color="success" className="width-100 mb-3 me-3">Success</Button>
                  <Button outline color="warning" className="width-100 mb-3 me-3">Warning</Button>
                  <Button outline color="danger" className="width-100 mb-3 me-3">Danger</Button>
                  <Button outline color="gray" className="width-100 mb-3 me-3">Gray</Button>
                  <Button outline color="inverse" className="width-100 mb-3 me-3">Inverse</Button>
                </p>
              </div>
            </Widget>
          </Col>

          <Col md={6} sm={12} xs={12}>
            <Widget
              title={<h5>Rounded <span className="fw-semi-bold">Buttons</span>
              </h5>} close collapse
            >
              <div>
                <p className="fs-mini">
                  Use any of the available button properties to quickly create a styled button.
                  Semantically distinguishable beauty. Use <code>.btn-rounded</code> or <code>.btn-rounded-f</code>.
                </p>
                <p>
                  <Button color="default" className="btn-rounded-f width-100 mb-3 me-3">Default</Button>
                  <Button color="primary" className="btn-rounded-f width-100 mb-3 me-3">Primary</Button>
                  <Button color="info" className="btn-rounded-f width-100 mb-3 me-3">Info</Button>
                  <Button color="success" className="btn-rounded-f width-100 mb-3 me-3">Success</Button>
                  <Button outline color="warning" className="btn-rounded width-100 mb-3 me-3">Warning</Button>
                  <Button outline color="danger" className="btn-rounded width-100 mb-3 me-3">Danger</Button>
                  <Button outline color="gray" className="btn-rounded width-100 mb-3 me-3">Gray</Button>
                  <Button outline color="inverse" className="btn-rounded width-100 mb-3 me-3">Inverse</Button>
                </p>
              </div>
            </Widget>
          </Col>

          {/* Block Buttons */}
          <Col md={6} sm={12} xs={12}>
            <Widget
              title={<h5> Block <span className="fw-semi-bold">Buttons</span>
              </h5>} close collapse
            >
              <div>
                <p className="fs-mini text-muted">
                  Create block level buttons - those that span the full width
                  of a parent— by adding <code>d-grid</code> to <code>wrapper</code> parent.
                  Great for menu & social buttons.
                </p>
                <div className="d-grid">
                  <Button color="info" className="mb-3">Block Button</Button>
                  <Button color="default" className="mb-3">Show Menu &nbsp;&nbsp;&nbsp;<i
                    className="fa fa-bars"
                  /></Button>
                  <Button color="primary" className="mb-3"><i className="fa fa-facebook" />&nbsp;&nbsp;Login mit
                    Facebook</Button>
                  <Button color="warning" className="mb-3">Are you sure?</Button>
                </div>
              </div>
            </Widget>
          </Col>

          {/* Disabled Buttons */}
          <Col md={6} sm={12} xs={12}>
            <Widget
              title={<h5> Disabled <span className="fw-semi-bold">Buttons</span>
              </h5>} close collapse
            >
              <div>
                <p className="fs-mini text-muted">
                  Make buttons look unclickable by fading them back 50%.
                  Add the <code>disabled</code> to <code>&lt;Button&gt;</code> component.
                </p>
                <p>
                  <Button color="primary" disabled className="me-3">Primary button</Button>
                  <Button color="default" disabled className="me-1">Button</Button>
                </p>
                <p>
                  <Button color="success" size="sm" disabled className="me-3">Primary Link</Button>
                  <Button color="default" size="sm" disabled className="me-1">Link</Button>
                </p>
              </div>
            </Widget>
          </Col>

          {/* Buttons Groups */}
          <Col md={6} sm={12} xs={12}>
            <Widget
              title={<h5> Button <span className="fw-semi-bold">Groups</span>
              </h5>} close collapse
            >
              <div>
                <p className="fs-mini text-muted">
                  Group a series of buttons together on a single
                  line with the button group.
                  Add on optional JavaScript radio and checkbox
                  style behavior with Bootstrap buttons plugin.
                </p>
                <ButtonGroup>
                  <Button color="default">Left</Button>
                  <Button color="default">Middle</Button>
                  <Button color="default">Right</Button>
                </ButtonGroup>
                <ButtonToolbar className="mb-3">
                  <ButtonGroup className="me-2 mt-3">
                    <Button color="default" className="ms-0">1</Button>
                    <Button color="default">2</Button>
                    <Button color="default">3</Button>
                    <Button color="default">4</Button>
                  </ButtonGroup>
                  <ButtonGroup className="me-2 mt-3">
                    <Button color="default">5</Button>
                    <Button color="default">6</Button>
                    <Button color="default">7</Button>
                  </ButtonGroup>
                  <ButtonGroup className="me-2 mt-3">
                    <Button color="default">8</Button>
                  </ButtonGroup>
                </ButtonToolbar>

              </div>
            </Widget>
          </Col>

          {/* Button Dropdowns */}
          {/* todo: check after reactstrap update */}
          <Col md={6} sm={12} xs={12}>
            <Widget
              title={<h5> Button <span className="fw-semi-bold">Dropdowns</span>
              </h5>} close collapse
            >
              <div>
                <p className="fs-mini text-muted">
                  Add dropdown menus to nearly anything with
                  this simple plugin, including the buttons,
                  navbar, tabs, and pills.
                  Both solid & segmented dropdown options available.
                </p>

                <div className="mb-3">
                  <ButtonDropdown
                    isOpen={state.dropdownOpenOne} toggle={toggleOne}
                    className="me-3"
                  >
                    <DropdownToggle caret color="danger">
                      &nbsp; One &nbsp;
                    </DropdownToggle>
                    <DropdownMenu>
                      <DropdownItem>Action</DropdownItem>
                      <DropdownItem>Another action</DropdownItem>
                      <DropdownItem>Something else here</DropdownItem>
                      <DropdownItem divider />
                      <DropdownItem>Separated link</DropdownItem>
                    </DropdownMenu>
                  </ButtonDropdown>

                  <ButtonDropdown isOpen={state.dropdownOpenTwo} toggle={toggleTwo}>
                    <DropdownToggle size="sm" caret color="gray">
                      &nbsp; One &nbsp;
                    </DropdownToggle>
                    <DropdownMenu>
                      <DropdownItem>Action</DropdownItem>
                      <DropdownItem>Another action</DropdownItem>
                      <DropdownItem>Something else here</DropdownItem>
                      <DropdownItem divider />
                      <DropdownItem>Separated link</DropdownItem>
                    </DropdownMenu>
                  </ButtonDropdown>
                </div>
                <div className="mb-xs">
                  <ButtonDropdown
                    isOpen={state.dropdownOpenThree} toggle={toggleThree}
                    className="me-3"
                  >
                    <Button id="dropdownThree" color="primary">Primary</Button>
                    <DropdownToggle color="primary" caret className="dropdown-toggle-split" />
                    <DropdownMenu>
                      <DropdownItem>Action</DropdownItem>
                      <DropdownItem>Another action</DropdownItem>
                      <DropdownItem>Something else here</DropdownItem>
                      <DropdownItem divider />
                      <DropdownItem>Separated link</DropdownItem>
                    </DropdownMenu>
                  </ButtonDropdown>
                  <ButtonDropdown isOpen={state.dropdownOpenFour} toggle={toggleFour}>
                    <Button size="sm" id="dropdownFour" color="gray">Gray</Button>
                    <DropdownToggle size="sm" caret color="gray" className="dropdown-toggle-split" />
                    <DropdownMenu>
                      <DropdownItem>Action</DropdownItem>
                      <DropdownItem>Another action</DropdownItem>
                      <DropdownItem>Something else here</DropdownItem>
                      <DropdownItem divider />
                      <DropdownItem>Separated link</DropdownItem>
                    </DropdownMenu>
                  </ButtonDropdown>
                </div>
              </div>
            </Widget>
          </Col>
        </Row>

        <Row>
          <Col md={12} sm={12} xs={12}>
            <Widget
              title={<h6> Button <span className="fw-semi-bold">Options</span>
              </h6>} close collapse
            >
              <Row>
                {/* Checkboxes */}
                <Col md={12} sm={12} xs={12}>
                  <h4> Button <span className="fw-semi-bold">Checkboxes</span></h4>
                  <p className="fs-mini text-muted">
                    Do more with buttons. Control button states
                    or create groups of buttons for more components like
                    toolbars.
                    Use <code>ButtonGroup</code> to a group
                    of checkboxes for checkbox style toggling on
                    btn-group.
                  </p>
                  <div className="mb-3">
                    <ButtonGroup>
                      <Button
                        color="default" onClick={() => onCheckboxBtnClickOne(1)}
                        active={state.cSelectedOne.includes(1)}
                      >Left way</Button>
                      <Button
                        color="default" onClick={() => onCheckboxBtnClickOne(2)}
                        active={state.cSelectedOne.includes(2)}
                      >Middle way</Button>
                      <Button
                        color="default" onClick={() => onCheckboxBtnClickOne(3)}
                        active={state.cSelectedOne.includes(3)}
                      >Right way</Button>
                    </ButtonGroup>
                  </div>
                  <div className="mb-xs">
                    <ButtonGroup>
                      <Button
                        size="sm" color="default" onClick={() => onCheckboxBtnClickTwo(1)}
                        active={state.cSelectedTwo.includes(1)}
                      >Left way</Button>
                      <Button
                        size="sm" color="default" onClick={() => onCheckboxBtnClickTwo(2)}
                        active={state.cSelectedTwo.includes(2)}
                      >Middle way</Button>
                      <Button
                        size="sm" color="default" onClick={() => onCheckboxBtnClickTwo(3)}
                        active={state.cSelectedTwo.includes(3)}
                      >Right way</Button>
                    </ButtonGroup>
                  </div>

                </Col>

                {/* Radios */}
                <Col md={12} sm={12} xs={12}>
                  <h4> Button <span className="fw-semi-bold">Radios</span></h4>
                  <p className="fs-mini text-muted">
                    Do more with buttons. Control button states
                    or create groups of buttons for more components like toolbars.
                    Use <code>ButtonGroup</code> to a group of radio
                    inputs for radio style toggling on btn-group.
                  </p>
                  <div className="mb-3">
                    <ButtonGroup>
                      <Button
                        color="default" onClick={() => onRadioBtnClickOne(1)}
                        active={state.rSelectedOne === 1}
                      >Left way</Button>
                      <Button
                        color="default" onClick={() => onRadioBtnClickOne(2)}
                        active={state.rSelectedOne === 2}
                      >Middle way</Button>
                      <Button
                        color="default" onClick={() => onRadioBtnClickOne(3)}
                        active={state.rSelectedOne === 3}
                      >Right way</Button>
                    </ButtonGroup>
                  </div>
                  <div className="mb-xs">
                    <ButtonGroup>
                      <Button
                        size="sm" color="default" onClick={() => onRadioBtnClickTwo(1)}
                        active={state.rSelectedTwo === 1}
                      >Left way</Button>
                      <Button
                        size="sm" color="default" onClick={() => onRadioBtnClickTwo(2)}
                        active={state.rSelectedTwo === 2}
                      >Middle way</Button>
                      <Button
                        size="sm" color="default" onClick={() => onRadioBtnClickTwo(3)}
                        active={state.rSelectedTwo === 3}
                      >Right way</Button>
                    </ButtonGroup>
                  </div>
                </Col>

                {/* Buttons with Icons */}
                <Col md={12} sm={12} xs={12}>
                  <h4> Use with <span className="fw-semi-bold">Icons</span></h4>
                  <p className="fs-mini text-muted">
                    Fontawesome and Glyph- icons may be used in buttons,
                    button groups for a toolbar, navigation, or prepended form inputs.
                    Let your buttons shine!
                  </p>
                  <div className="text-center">
                    <Button color="default" className="width-100 me-3 mb-3">
                      <i className="glyphicon glyphicon-tree-conifer text-success me-1 mb-xs" />
                      Forest
                    </Button>
                    <Button color="default" className="width-100 me-3 mb-3">
                      <i className="fa fa-check text-danger me-1 mb-xs" />
                      Submit
                    </Button>
                    <Button color="default" className="width-100 me-3 mb-3">
                      <i className="fa fa-facebook text-primary me-1 mb-xs" />
                      Login
                    </Button>
                  </div>
                  <div className="text-center">
                    <Button color="inverse" className="width-100 me-3 mb-3">
                      <i className="fa fa-exclamation text-warning me-1 mb-xs" />
                      Error
                    </Button>
                    <Button color="inverse" className="width-100 me-3 mb-3">
                      <i className="glyphicon glyphicon-globe text-info me-1 mb-xs" />
                      <span className="text-info">Globe</span>
                    </Button>
                    <Button color="inverse" className="width-100 me-3 mb-3">
                      <span className="circle bg-white me-1">
                        <i className="fa fa-map-marker text-gray" />
                      </span>
                      Map
                    </Button>
                  </div>
                </Col>
              </Row>
            </Widget>
          </Col>
        </Row>

      </div>
  );
};

export default Buttons;
