import React, { useState, useRef } from 'react';
import styled from 'styled-components';
import { useClickAway } from 'react-use';
import { DropButton } from '../common/buttons/PrimaryBtn';

export const DropText = () => {
  const [drop, setdrop] = useState(false);
  return (
    <DropDown className="dropdown">
      <DropButton title="Can View" svg="drop" onclick={() => setdrop(!drop)} />
      <div className={`drop-wrapper ${drop ? 'active' : ''}`}>
        <ul className="drop-list">
          <li>Can Edit</li>
          <li>Can View</li>
          <li>Remove</li>
        </ul>
      </div>
    </DropDown>
  );
};

export const FormRolePicker = ({
  selectedPermission,
  setSelectedPermission,
}) => {
  const [drop, setdrop] = useState(false);

  const onchangePermission = value => {
    setSelectedPermission(value);
    setdrop(!drop);
  };

  return (
    <DropDown className="dropdown">
      <DropButton
        title={selectedPermission}
        svg="drop"
        onclick={() => setdrop(!drop)}
      />
      <div className={`drop-wrapper ${drop ? 'active' : ''}`}>
        <ul className="drop-list">
          <li onClick={() => onchangePermission('editor')}>Can Edit</li>
          <li onClick={() => onchangePermission('viewer')}>Can View</li>
        </ul>
      </div>
    </DropDown>
  );
};

export const FilterDrop = ({ children }) => {
  const [drop, setdrop] = useState(false);
  const filterDrop = useRef(null);
  useClickAway(filterDrop, () => {
    setdrop(false);
  });
  return (
    <FilterDropDown ref={filterDrop} className="dropdown">
      <DropButton
        title="Filter by"
        svg="drop"
        className="drop-down"
        onclick={() => setdrop(!drop)}
      />
      <div className={`drop-wrapper ${drop ? 'active' : ''}`}>{children}</div>
    </FilterDropDown>
  );
};

export const FilterSelect = ({
  openFilterDrop,
  setOpenFilterDrop,
  children,
}) => {
  const filterDrop = useRef(null);
  useClickAway(filterDrop, () => {
    setOpenFilterDrop(false);
  });
  return (
    <FilterDropDown ref={filterDrop} className="dropdown">
      <DropButton
        title="Filter by"
        svg="drop"
        className="drop-down"
        onclick={() => setOpenFilterDrop(!openFilterDrop)}
      />
      <div className={`drop-wrapper ${openFilterDrop ? 'active' : ''}`}>
        {children}
      </div>
    </FilterDropDown>
  );
};

const DropDown = styled.div`
  position: relative;
  .drop-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--co-body);
    font-family: var(--ff-medium);
    font-size: var(--font-14);
    padding: 0.5rem 1.5rem;
    svg {
      width: 1.6rem;
      height: 1.6rem;
    }
    span {
      font-family: var(--ff-medium);
      font-size: var(--font-14);
      display: none;
    }
    &:hover {
      color: var(--co-primary);
    }
    > *:last-child:not(only-child) {
      margin-left: 0.8rem;
    }
    @media (min-width: 768px) {
      span {
        display: block;
      }
    }
  }
  .drop-wrapper {
    position: absolute;
    visibility: hidden;
    box-shadow: var(--shadow);
    width: 119px;
    border-radius: 8px;
    background: #fff;
    right: 0;
    top: 100%;
    z-index: 6;
    &.active {
      visibility: visible;
    }
  }

  .drop-list {
    padding: 1rem 0;
    li {
      font-family: var(--ff-medium);
      font-size: var(--font-14);
      color: var(--co-body);
      padding: 1rem 1.5rem;
      text-transform: capitalize;
      cursor: pointer;
      &:last-child {
        border-top: 1px solid #e8edff;
      }
      &:hover {
        color: var(--co-primary);
      }
    }
  }
`;
const FilterDropDown = styled.div`
  position: relative;
  .drop-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--co-body);
    font-family: var(--ff-medium);
    font-size: var(--font-14);
    padding: 0.5rem 1.5rem;
    svg {
      width: 1.6rem;
      height: 1.6rem;
    }
    span {
      font-family: var(--ff-medium);
      font-size: var(--font-14);
      display: none;
    }
    &:hover {
      color: var(--co-primary);
    }
    > *:last-child:not(only-child) {
      margin-left: 0.8rem;
    }
    @media (min-width: 768px) {
      span {
        display: block;
      }
    }
  }
  .drop-down {
    color: var(--co-primary);
    font-family: var(--ff-sbold);
    span {
      font-family: var(--ff-sbold);
      text-transform: none;
    }
    svg {
      width: 10px;
      height: 10px;
    }
  }
  .drop-wrapper {
    position: absolute;
    visibility: hidden;
    box-shadow: var(--shadow);
    width: 300px;
    border-radius: 8px;
    background: #fff;
    left: 0;
    top: 100%;
    z-index: 6;
    &.active {
      visibility: visible;
    }
  }

  .drop-list {
    padding: 1rem 0;
    li {
      display: flex;
      align-items: center;
      font-family: var(--ff-medium);
      font-size: var(--font-16);
      color: var(--co-body);
      padding: 1rem 1.5rem;
      text-transform: capitalize;
      cursor: pointer;
      svg {
        width: 12px;
        height: 12px;
        margin-right: 1rem;
        opacity: 0;
      }
      &.active {
        svg {
          opacity: 1;
        }
      }

      &:hover {
        color: var(--co-primary);
      }
    }
  }
`;
