import React from "react";
import _ from "lodash";
import angryIcon from "!!svg-sprite-loader!@cloudbees/honeyui-icons/regular/angry.svg";
import { Select, SelectItem, SelectHeaderWithIcon } from "../../";

export default (
  <>
    <div className="d-flex m-5">
      <div className="ml-5">
        <Select header="Select Project">
          <SelectItem onClick={() => {}}>Lorem ipsum</SelectItem>
          <SelectItem isActive={true}>Lorem</SelectItem>
          {_.range(30).map(i => (
            <SelectItem key={i}>Lorem ipsum dolor sit amet, consectetur adipiscing elit</SelectItem>
          ))}
        </Select>
      </div>
    </div>

    <div className="d-flex m-5">
      <div className="ml-5">
        <Select
          header="Select Project with search"
          onSearch={() => {}}
          searchLabel="Filter Projects"
          btnVariant="outline-info"
        >
          <SelectItem onClick={() => {}}>Lorem</SelectItem>
          <SelectItem isActive={true}>Lorem ipsum dolor</SelectItem>
          {_.range(30).map(i => (
            <SelectItem key={i}>Lorem ipsum dolor sit amet, consectetur adipiscing elit</SelectItem>
          ))}
        </Select>
      </div>
    </div>

    <div className="d-flex m-5">
      <div className="ml-5">
        <Select
          header={<SelectHeaderWithIcon text="Select With Icon" icon={angryIcon.id} />}
          btnVariant="outline-secondary"
        >
          <SelectItem onClick={() => {}} icon={angryIcon}>
            Lorem ipsum
          </SelectItem>
          <SelectItem isActive={true} icon={angryIcon}>
            Lorem
          </SelectItem>
        </Select>
      </div>
    </div>

    <div className="d-flex m-5">
      <div className="ml-5">
        <Select
          btnSize="sm"
          header="Select with Lazy load"
          onSearch={() => console.log("search")}
          onLazyLoad={() => console.log("lazy load")}
        >
          <SelectItem isActive={true} onClick={() => {}} icon={angryIcon}>
            Lorem ipsum dolor
          </SelectItem>
          <SelectItem isActive={true} icon={angryIcon}>
            Lorem ipsum
          </SelectItem>
          {_.range(30).map(i => (
            <SelectItem key={i} icon={angryIcon}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit
            </SelectItem>
          ))}
        </Select>
      </div>
    </div>

    <div className="d-flex m-5">
      <div className="ml-5">
        <Select
          btnSize="sm"
          header="Select with Lazy load"
          onSearch={() => console.log("search")}
          onLazyLoad={() => console.log("lazy load")}
        >
          <SelectItem isActive={true} onClick={() => {}} icon={angryIcon}>
            Lorem ipsum dolor
          </SelectItem>
          <SelectItem isActive={true} icon={angryIcon}>
            Lorem ipsum
          </SelectItem>
          {_.range(30).map(i => (
            <SelectItem key={i} icon={angryIcon}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit
            </SelectItem>
          ))}
        </Select>
      </div>
    </div>
  </>
);