// import { contrastColor } from 'contrast-color';
import styled from 'styled-components';
import { GetThemeVar } from '../../support/GetThemeVar';

const css = styled.div;

export const Container = css<any>`
   background: ${(props) => props.theme?.header?.backgroundColor || '#000'};
   width: 300px;
   height: 100%;
   overflow-y: auto;
   padding-bottom: 40px;

   .username-container {
      color: white;
      background: rgba(255, 255, 255, 0.1);
      padding: 10px;
      margin: 10px 0px;
      display: flex;
      align-content: center;
      align-items: center;
      color: ${(props) => props.theme?.header?.textColorMenu || 'white'};

      .username-name {
         font-weight: 500;
         flex: 1;
         padding-left: 15px;
      }

      .role {
         font-size: 12px;
         font-weight: 500;
         opacity: 0.6;
      }

      svg {
         font-size: 10px;
         margin-left: 10px;
      }

      a {
         padding-top: 5px;
         display: block;
         color: ${(props) => props.theme?.header?.textColorActiveMenu || GetThemeVar(props.theme, 'primary')};
      }
   }

   .menu-icon {
      padding-right: 10px;
      display: none;

      .ds-menu-hamburger {
         width: 25px;
         height: 18px;
         position: relative;
         margin: 0px;
         -webkit-transform: rotate(0deg);
         -moz-transform: rotate(0deg);
         -o-transform: rotate(0deg);
         transform: rotate(0deg);
         -webkit-transition: 0.5s ease-in-out;
         -moz-transition: 0.5s ease-in-out;
         -o-transition: 0.5s ease-in-out;
         transition: 0.5s ease-in-out;
         cursor: pointer;

         span {
            display: block;
            position: absolute;
            height: 2px;
            width: 100%;
            background: ${(props) => props.theme?.header?.textColorMenu || 'white'};
            border-radius: 4px;
            opacity: 1;
            left: 0;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: 0.25s ease-in-out;
            -moz-transition: 0.25s ease-in-out;
            -o-transition: 0.25s ease-in-out;
            transition: 0.25s ease-in-out;
         }

         /* Icon 4 */

         & span:nth-child(1) {
            top: 0px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
         }

         & span:nth-child(2) {
            top: 8px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
         }

         & span:nth-child(3) {
            top: 16px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
         }

         &.open span:nth-child(1) {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            top: -3px;
            left: 3px;
         }

         &.open span:nth-child(2) {
            width: 0%;
            opacity: 0;
         }

         &.open span:nth-child(3) {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 15px;
            left: 3px;
         }
      }

      @media (max-width: 992px) {
         display: block;
      }
   }

   .logo-container {
      text-align: center;
      padding: 10px 16px;
   }

   .user-container {
      text-align: center;
      color: white;
      padding: 25px 0px;

      .user-image-container {
         padding-bottom: 15px;
      }

      .username {
         font-weight: bold;
      }
   }

   .menu-container {
      padding: 0px 12px;

      .title-category {
         color: ${(props) => props.theme?.header?.textColorActiveMenu || GetThemeVar(props.theme, 'primary')};
         text-transform: uppercase;
         font-weight: bold;
         padding: 10px 0px;
         font-size: 13px;
      }

      hr {
         margin: 20px -12px;
         height: 0px;
         background: white;
         opacity: 0.2;
      }

      .menu-item {
         position: relative;
         justify-content: flex-start;
         display: flex;
         color: ${(props) => props.theme?.header?.textColorMenu || 'white'};
         font-size: 13px;
         align-items: center;
         padding: 10px 16px;
         text-decoration: none;
         line-height: 20px;
         transition: 0.25s all;
         font-weight: 600;
         width: 100%;
         display: flex;
         border-radius: 6px;
         vertical-align: middle;

         .icon,
         svg {
            height: 24px;
            width: 24px;
            margin-right: 16px;
            opacity: 0.6;
            vertical-align: middle;
         }

         .title {
            opacity: 0.7;
            flex: 1;
            transition: 0.25s all;
         }

         &.active {
            opacity: 1;
            transition: 0.25s all;
            color: ${(props) => props.theme?.header?.textColorActiveMenu || GetThemeVar(props.theme, 'primary')};

            .title {
               opacity: 1;
            }

            .icon,
            svg {
               opacity: 1;
               transition: 0.25s all;
            }
         }

         .caret {
            .icon,
            svg {
               height: 12px;
               width: 12px;
               opacity: 0.6;
               float: right;
               vertical-align: middle;
               transform: rotate(-90deg);
               transition: 0.25s all;
            }
         }
      }

      .menu-category {
         .menu-subcategory {
            overflow: hidden;
            transition: 0.25s all;
            opacity: 0;

            .item {
               align-items: center;
               position: relative;
               display: flex;
               color: ${(props) => props.theme?.header?.textColorMenu || 'white'};
               font-weight: bold;
               padding: 10px 16px;
               justify-content: flex-start;
               font-size: 13px;
               line-height: 20px;
               opacity: 0.7;
               text-decoration: none;
               padding-left: 56px;
               border-radius: 6px;

               &.active {
                  opacity: 1;
                  background: rgba(255, 255, 255, 0.1);
                  color: ${(props) => props.theme?.header?.textColorActiveMenu || GetThemeVar(props.theme, 'primary')};

                  .icon,
                  svg {
                     opacity: 1;
                  }
               }
            }
         }

         &.open {
            .menu-subcategory {
               transition: 0.25s all;
               opacity: 1;
            }

            .menu-item {
               .title {
                  opacity: 1;
                  transition: 0.25s all;
                  color: ${(props) => props.theme?.header?.textColorActiveMenu || GetThemeVar(props.theme, 'primary')};
               }

               .icon,
               svg {
                  opacity: 1;
                  transition: 0.25s all;
               }
            }

            .caret {
               .icon,
               svg {
                  transition: 0.25s all;
                  transform: rotate(0deg);
               }
            }
         }
      }
   }

   @media (max-width: 992px) {
      width: 100%;
      height: 55px;
      transition: 0.25s all;
      overflow-y: hidden;
      z-index: 100;
      position: fixed;

      .menu-icon {
         flex: 1;
      }

      .actions-container {
         flex: 1;
      }

      .division-menu-top {
         display: none;
      }

      .logo-container {
         text-align: center;
      }

      .logo-container {
         padding: 10px 16px;
         transition: 0.25s all;
      }

      ${(p) =>
         p.open &&
         `
         height: 100%;
         overflow-y: auto;
      `}
   }
`;
