import React, { useRef } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { getNameInitials, nameShortner } from '../../../utils/helpers';
import { Avatar, AvatarForProfile } from '../avatars/Avatar';
import LinkItems from '../link-items/LinkItems';
import { useClickAway } from 'react-use';

export const GrowthTools = ({ showGrowth, setShowGrowth, setShowProfile }) => {
  const growthRef = useRef(null);

  useClickAway(growthRef, () => {
    setShowGrowth(false);
  });

  return (
    <DropDown ref={growthRef} className="dropdown">
      <button
        onClick={() => {
          setShowGrowth(!showGrowth);
          setShowProfile(false);
        }}
        className="drop-btn"
        style={{ borderRight: '1px solid #C5C9DA' }}
      >
        <svg>
          <use href="/images/icons.svg#growth"></use>
        </svg>
        <span>Growth Tools</span>
      </button>
      <div
        style={{ backgroundColor: '#ffffff' }}
        className={`drop-wrapper ${showGrowth ? 'active' : ''}`}
      >
        <ul className="growth-drop">
          <li>
            <Link to="/">
              <svg>
                <use href="/images/icons.svg#identity"></use>
              </svg>
              <span>Identity</span>
            </Link>
          </li>
          <li>
            <Link to="/">
              <svg>
                <use href="/images/icons.svg#learn"></use>
              </svg>
              <span>Learn</span>
            </Link>
          </li>
        </ul>
      </div>
    </DropDown>
  );
};

export const ProfileDrop = ({
  showProfile,
  setShowProfile,
  setShowGrowth,
  userProfile,
}) => {
  const profileRef = useRef(null);
  useClickAway(profileRef, () => {
    setShowProfile(false);
  });
  return (
    <DropDown ref={profileRef}>
      <button
        onClick={() => {
          setShowProfile(!showProfile);
          setShowGrowth(false);
        }}
        className="drop-btn"
      >
        <span>
          {userProfile && userProfile.firstName
            ? nameShortner(userProfile.firstName, 10)
            : nameShortner(userProfile?.email, 10)}
        </span>
        <AvatarForProfile
          initials={getNameInitials(
            userProfile && userProfile.firstName
              ? `${userProfile.firstName} ${userProfile.lastName}`
              : 'New User'
          )}
          image={userProfile?.profilePicture}
          name={userProfile && userProfile._id ? userProfile._id : 'null'}
        />
      </button>
      <div
        style={{ backgroundColor: '#ffffff' }}
        className={`profile-drop-wrapper ${showProfile ? 'active' : ''}`}
      >
        <Avatar
          initials={getNameInitials(
            userProfile && userProfile.firstName
              ? `${userProfile.firstName} ${userProfile.lastName}`
              : 'New User'
          )}
          image={userProfile?.profilePicture}
          name={userProfile?._id ? userProfile?._id : 'null'}
        />
        <h3>
          {getNameInitials(
            userProfile && userProfile.firstName
              ? `${userProfile.firstName} ${userProfile.lastName}`
              : 'New User'
          )}
        </h3>
        <p>{userProfile?.email}</p>

        <LinkItems link="/settings" title="View My Profile" />
      </div>
    </DropDown>
  );
};

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: 215px;
    border-radius: 8px;
    right: 0;
    top: 170%;
    z-index: 8;
    background: #fff;
    &.active {
      visibility: visible;
    }
  }
  .profile-drop-wrapper {
    position: absolute;
    visibility: hidden;
    box-shadow: var(--shadow);
    width: 250px;
    border-radius: 8px;
    padding: 3rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 8;
    right: 0;
    top: 120%;
    background: #fff;
    &.active {
      visibility: visible;
    }
    h3 {
      margin-top: 2rem;
      font-family: var(--ff-medium);
      font-size: var(--font-16);
      color: var(--co-heading);
      line-height: 1.6;
      font-weight: 500;
    }

    p {
      line-height: 1.6;
      margin-bottom: 3rem;
    }
    a {
      position: relative;
      z-index: 1;
    }
  }
  .growth-drop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    li {
      width: 50%;
      a {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 4.7rem 0;
        svg {
          width: 40px;
          height: 40px;
        }
        span {
          margin-top: 1rem;
          font-family: var(--ff-sbold);
          font-size: var(--font-12);
          color: var(--co-body);
        }
      }
    }
  }
`;
