import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import styled from 'styled-components';
import { getNameInitials } from '../../utils/helpers';
import { Avatar, AvatarForProfile } from '../common/avatars/Avatar';
import { LinkPrimaryOutline } from '../common/link-items/links';
export const GrowthTools = ({ showGrowth, setShowGrowth, setShowProfile }) => {
  return /*#__PURE__*/ React.createElement(
    DropDown,
    {
      className: 'dropdown',
    },
    /*#__PURE__*/ React.createElement(
      'button',
      {
        onClick: () => {
          setShowGrowth(!showGrowth);
          setShowProfile(false);
        },
        className: 'drop-btn',
        style: {
          borderRight: '1px solid #C5C9DA',
        },
      },
      /*#__PURE__*/ React.createElement(
        'svg',
        null,
        /*#__PURE__*/ React.createElement('use', {
          href: '/images/icons.svg#growth',
        })
      ),
      /*#__PURE__*/ React.createElement('span', null, 'Growth Tools')
    ),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `drop-wrapper ${showGrowth ? 'active' : ''}`,
      },
      /*#__PURE__*/ React.createElement(
        'ul',
        {
          className: 'growth-drop',
        },
        /*#__PURE__*/ React.createElement(
          'li',
          null,
          /*#__PURE__*/ React.createElement(
            Link,
            null,
            /*#__PURE__*/ React.createElement(
              'svg',
              null,
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#identity',
              })
            ),
            /*#__PURE__*/ React.createElement('span', null, 'Identity')
          )
        ),
        /*#__PURE__*/ React.createElement(
          'li',
          null,
          /*#__PURE__*/ React.createElement(
            Link,
            null,
            /*#__PURE__*/ React.createElement(
              'svg',
              null,
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#learn',
              })
            ),
            /*#__PURE__*/ React.createElement('span', null, 'Learn')
          )
        )
      )
    )
  );
};
export const ProfileDrop = ({ showProfile, setShowProfile, setShowGrowth }) => {
  return /*#__PURE__*/ React.createElement(
    DropDown,
    null,
    /*#__PURE__*/ React.createElement(
      'button',
      {
        onClick: () => {
          setShowProfile(!showProfile);
          setShowGrowth(false);
        },
        className: 'drop-btn',
      },
      /*#__PURE__*/ React.createElement('span', null, 'Yomi'),
      /*#__PURE__*/ React.createElement(Avatar, {
        image: '/images/avatar.png',
        name: 'YA',
      })
    ),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `profile-drop-wrapper ${showProfile ? 'active' : ''}`,
      },
      /*#__PURE__*/ React.createElement(Avatar, {
        image: '/images/avatar.png',
        name: 'YA',
      }),
      /*#__PURE__*/ React.createElement('h3', null, 'Yomi Adedeji'),
      /*#__PURE__*/ React.createElement('p', null, 'yomi@softcom.ng'),
      /*#__PURE__*/ React.createElement(LinkPrimaryOutline, {
        title: 'View My Profile',
        to: '/',
      })
    )
  );
};
export const SingleProfileDrop = ({
  showProfile,
  userProfile,
  setShowProfile,
  name,
}) => {
  const goToProfile = () => {
    return /*#__PURE__*/ React.createElement(NavLink, {
      to: '/settings',
    });
  };

  return /*#__PURE__*/ React.createElement(
    DropDown,
    null,
    /*#__PURE__*/ React.createElement(
      'button',
      {
        onClick: () => {
          setShowProfile(!showProfile);
        },
        className: 'drop-btn',
      },
      name ? /*#__PURE__*/ React.createElement('span', null, name) : '',
      /*#__PURE__*/ React.createElement(AvatarForProfile, {
        image:
          userProfile && userProfile.profilePicture
            ? userProfile.profilePicture
            : '',
        initials: getNameInitials(
          userProfile && userProfile.firstName
            ? `${userProfile.firstName} ${userProfile.lastName}`
            : 'New User'
        ),
      })
    ),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: `profile-drop-wrapper ${showProfile ? 'active' : ''}`,
      },
      /*#__PURE__*/ React.createElement(Avatar, {
        image: 'icon-disp',
        initials: getNameInitials(
          userProfile && userProfile.firstName
            ? `${userProfile.firstName} ${userProfile.lastName}`
            : 'New User'
        ),
      }),
      /*#__PURE__*/ React.createElement(
        'h3',
        null,
        userProfile?.firstName,
        ' ',
        userProfile?.lastName
      ),
      /*#__PURE__*/ React.createElement('p', null, userProfile?.email),
      /*#__PURE__*/ React.createElement(LinkPrimaryOutline, {
        link: '/settings',
        title: 'View My Profile',
        onClick: () => goToProfile(),
      })
    )
  );
};
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: 6;
    &.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: 6;
    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;
    }
  }
  .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);
        }
      }
    }
  }
`;
