import React, { useState } from 'react';
import { connect } from 'react-redux';
import styled from 'styled-components';
import { DropButton } from '../buttons/PrimaryBtn';

const AccessMenu = ({ value, onchange, allRoles }) => {
  const [open, setOpen] = useState(false);
  /**
   * description: Change the access of the invited collaberator
   * @param {*} access
   */

  const onChangeAccess = access => {
    if (onchange) {
      onchange(access);
      setOpen(false);
    }
  };

  return /*#__PURE__*/ React.createElement(
    DropDown,
    {
      className: 'dropdown',
    },
    /*#__PURE__*/ React.createElement(DropButton, {
      title: value || 'Select',
      svg: 'drop',
      onclick: () => setOpen(!open),
    }),
    /*#__PURE__*/ React.createElement(
      'span',
      {
        className: `drop-wrapper ${open ? 'active' : ''}`,
      },
      /*#__PURE__*/ React.createElement(
        'ul',
        {
          className: 'drop-list',
        },
        allRoles?.roles?.map((role, i) => {
          return /*#__PURE__*/ React.createElement(
            'li',
            {
              key: i,
              onClick: () => onChangeAccess(role),
            },
            role.name
          );
        })
      )
    )
  );
};

const mapStateToProps = state => ({
  allRoles: state.workspace.allRoles,
});

export default connect(mapStateToProps, null)(AccessMenu);
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);
      }
    }
  }
`;
