import React from "react";
import { Dropdown, DropdownItem } from "../../";
import { InputHandlers } from "../dropdown";
import BookmarkIcon from "!!svg-sprite-loader!@cloudbees/honeyui-icons/solid/bookmark.svg";
import { Icon } from "../../";

export default () => {
  const ref = React.createRef<InputHandlers>();

  return (
    <>
      <div className="d-flex m-5">
        <div className="ml-5">
          <Dropdown btnSize="sm" header="Dropdown" position="left">
            <DropdownItem as="button">Link1</DropdownItem>
            <DropdownItem as="button">Link2</DropdownItem>
          </Dropdown>
        </div>

        <div className="ml-5">
          <Dropdown btnSize="sm" autoClose header="autoClose Dropdown" position="left">
            <DropdownItem as="button">Link1</DropdownItem>
            <DropdownItem as="button">Link2</DropdownItem>
          </Dropdown>
        </div>

        <div className="ml-5">
          <Dropdown
            btnSize="sm"
            btnVariant="outline-success"
            id="base-dropdown"
            header="Dropdown"
            position="left"
          >
            <DropdownItem as="button">Link1</DropdownItem>
            <DropdownItem as="button">Link2</DropdownItem>
          </Dropdown>
        </div>

        <div className="ml-5">
          <Dropdown
            btnSize="sm"
            btnVariant="outline-info"
            btnClassName="py-2"
            id="base-dropdown"
            header="Dropdown"
            position="left"
            arrow={true}
          >
            <DropdownItem as="button">Link1</DropdownItem>
            <DropdownItem as="button">Link2</DropdownItem>
          </Dropdown>
        </div>

        <div className="ml-5">
          <Dropdown
            btnVariant="warning"
            id="base-dropdown"
            header={
              <div className="d-inline-block align-middle">
                <Icon
                  className="ml-1 align-middle"
                  viewBox={BookmarkIcon.viewBox}
                  id={BookmarkIcon.id}
                  size="md"
                />
              </div>
            }
            position="left"
          >
            <DropdownItem as="button">Link1</DropdownItem>
            <DropdownItem as="button">Link2</DropdownItem>
          </Dropdown>
        </div>

        <div className="ml-5">
          <Dropdown
            btnSize="lg"
            btnVariant="outline-dark"
            id="base-dropdown"
            header={
              <div className="d-inline-block align-middle">
                Dropdown
                <Icon
                  className="ml-1 align-middle"
                  viewBox={BookmarkIcon.viewBox}
                  id={BookmarkIcon.id}
                  size="xl"
                />
              </div>
            }
            arrow={true}
          >
            <DropdownItem as="button">Link1</DropdownItem>
            <DropdownItem as="button">Link2</DropdownItem>
          </Dropdown>
        </div>
      </div>

      <div className="ml-5">
        <Dropdown
          minHeight={100}
          maxHeight={200}
          minWidth={100}
          maxWidth="100%"
          id="base-dropdown-height"
          header="Dropdown with height and width"
          position="left"
        >
          <DropdownItem as="button">Link1</DropdownItem>
          <DropdownItem as="button">Link2</DropdownItem>
        </Dropdown>
      </div>

      <div className="d-flex m-5">
        <div className="ml-5">
          <Dropdown
            btnSize="sm"
            btnVariant="outline-dark"
            btnClassName="py-2"
            id="base-dropdown"
            header="Dropdown with long items"
            position="left"
            arrow={true}
            maxWidth={300}
          >
            <DropdownItem as="button">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </DropdownItem>
            <DropdownItem as="button">
              Harum porro veniam molestiae qui cupiditate debitis velit nulla veritatis earum
              expedita natus obcaecati, neque odit voluptas omnis doloremque dolorum delectus amet
              beatae dolor at! Beatae aliquam aspernatur deserunt. Pariatur, laborum nesciunt, enim
              expedita assumenda odit ipsam quia itaque repellat blanditiis at neque? Praesentium
              exercitationem provident fugit explicabo ea quae, temporibus iure eius, delectus
              nostrum impedit enim quis at? Ad, corporis voluptatibus! Laborum quam accusantium
              repudiandae, perspiciatis quae ex, eum perferendis voluptates nam optio tempora
              ducimus, eveniet aperiam sit reiciendis dicta nihil nobis! Doloremque debitis
              assumenda, labore maxime aperiam laborum earum ad veniam aliquam ipsa cum est sequi,
              repudiandae fugiat dolore nihil omnis incidunt unde voluptates doloribus?
              Reprehenderit laboriosam dolor iusto est earum ea unde maxime asperiores quos nemo,
              veritatis aut. Accusamus architecto tempora officiis dolorem nobis quas quaerat quis
              numquam sed.
            </DropdownItem>
          </Dropdown>
        </div>
      </div>

      <div className="ml-5">
        <Dropdown
          minHeight={100}
          maxHeight={200}
          minWidth={100}
          maxWidth="100%"
          id="base-dropdown-height"
          header="Dropdown closes on click"
          onClose={() => console.log("on close")}
          position="left"
          ref={ref}
        >
          <DropdownItem
            as="button"
            onClick={() => {
              ref.current.closeDropdown();
            }}
          >
            Link1
          </DropdownItem>
          <DropdownItem
            as="button"
            onClick={() => {
              ref.current.closeDropdown();
            }}
          >
            Link2
          </DropdownItem>
        </Dropdown>
      </div>
    </>
  );
};