import styled from 'styled-components';
import { GetThemeVar } from '../../support/GetThemeVar';
import { ITheme } from '../AppProvider/ITheme';

const css = styled.div;

export default css<ITheme>`
   .width-max {
      margin: auto;
      max-width: 1380px;
   }

   .ds-table {
      display: table;
   }

   .ds-cell {
      display: table-cell;
      vertical-align: top;
   }

   .ds-cell-min {
      width: 1%;
   }

   .vertical-align-middle {
      vertical-align: middle;
   }

   .ds-header-mobile-space {
      height: 55px;
      display: none;

      @media only screen and (max-width: 820px) {
         display: block;
      }
   }

   .ds-logo {
      padding-left: 20px;
   }

   .ds-header {
      -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
      -khtml-user-select: none; /* Konqueror HTML */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
      user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
      background: ${(props) => props.theme?.header?.backgroundColor || '#000'};
      color: ${(props) => props.theme?.header?.textColor || '#fff'};
      font-size: 14px;
      padding: 0px 15px;
      transition: 0.15s all;

      .ds-header-top {
         padding: 10px 0px;

         .ds-user-cell {
            width: 1%;
            white-space: nowrap;
            cursor: pointer;
            padding-right: 10px;

            &:hover {
               color: ${(props) => props.theme?.header?.textColorActiveMenu || GetThemeVar(props.theme, 'primary')};
            }

            .username-container {
               border-left: 1px solid rgba(255, 255, 255, 0.3);
               padding-left: 15px;
               position: relative;

               .user-image-container {
                  display: inline-block;
                  margin-right: 5px;
                  cursor: pointer;
               }

               .username {
                  color: ${(props) => props.theme?.header?.textColorUsername || '#fff'};
               }

               .username-container-popup {
                  background: #000000b8;
                  text-align: left;
                  width: 250px;
                  position: absolute;
                  padding: 10px;
                  right: 0px;
                  top: 32px;
                  border-radius: 5px;
                  backdrop-filter: blur(10px);
                  opacity: 0;
                  visibility: hidden;
                  transform: translateY(25px);
                  transition: opacity 150ms, transform 150ms, visibility 150ms;
                  z-index: 100;

                  &.opened {
                     transform: translateY(0px);
                     visibility: visible;
                     opacity: 1;
                  }

                  &:before {
                     display: block;
                     position: absolute;
                     content: '';
                     top: -8px;
                     right: 30px;
                     border: 8px solid #000000b8;
                     border-top: 0px;
                     border-left-color: transparent;
                     border-right-color: transparent;
                     z-index: 1;
                     backdrop-filter: blur(10px);
                  }

                  .name {
                     font-weight: 600;
                     color: white;
                  }

                  .role {
                     font-size: 13px;
                     color: rgba(255, 255, 255, 0.63);
                  }

                  .ds-menu {
                     margin-top: 5px;
                     padding-top: 5px;
                     border-top: 1px solid rgba(255, 255, 255, 0.18);

                     .ds-item {
                        cursor: pointer;
                        padding: 7px 15px;
                        display: block;
                        text-decoration: none;

                        color: rgba(255, 255, 255, 0.6);

                        &:hover {
                           background: rgba(255, 255, 255, 0.1);
                           color: rgba(255, 255, 255, 1);
                           text-decoration: none;
                        }
                     }
                  }
               }
            }
         }

         .ds-menu-hamburger {
            width: 25px;
            height: 25px;
            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;
            position: absolute;
            top: 16px;
            left: 16px;
            display: none;

            span {
               display: block;
               position: absolute;
               height: 2px;
               width: 100%;
               background: 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: 8px;
            }

            &.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: 16px;
               left: 8px;
            }
         }

         @media only screen and (max-width: 820px) {
            text-align: center;
            height: 55px;

            .ds-user-cell {
               display: none;
            }

            .ds-menu-hamburger {
               display: block;
            }
         }
      }

      .ds-header-bottom {
         .ds-menu {
            padding: 10px 0px;
            position: relative;

            .ds-menu-item {
               display: inline-block;
               padding: 7px 15px;
               font-weight: 500;
               border-radius: 5px;
               color: ${(props) => props.theme?.header?.textColorMenu || 'white'};
               transition: 0.15s all;
               margin: 0px 3px;
               position: relative;
               opacity: 0.6;

               &.hover,
               &:hover {
                  cursor: pointer;
                  background: rgba(255, 255, 255, 0.1);
                  opacity: 1;
                  transition: 0.15s all;
                  text-decoration: none;
                  color: ${(props) => props.theme?.header?.textColorActiveMenu || GetThemeVar(props.theme, 'primary')};
               }

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

            .ds-menu-category {
               display: inline-block;
               position: relative;
               &:before {
                  display: block;
                  position: absolute;
                  content: '';
                  bottom: -5px;
                  left: 50%;
                  border: 8px solid white;
                  border-top: 0px;
                  border-left-color: transparent;
                  border-right-color: transparent;
                  transform: translateX(-50%);
                  z-index: 1;
                  opacity: 0;
                  visibility: hidden;
                  transform: translateY(25px);
                  transition: opacity 150ms, transform 150ms, visibility 150ms;
               }

               .ds-menu-subcategory {
                  color: ${(props) => props.theme?.header?.textColor || '#fff'};
                  position: absolute;
                  background: white;
                  top: 34px;
                  width: 250px;
                  left: 0px;
                  box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
                  padding: 10px 7px;
                  position: absolute;
                  opacity: 0;
                  visibility: hidden;
                  z-index: 100;
                  transform: translateY(25px);
                  transition: opacity 150ms, transform 150ms, visibility 150ms;

                  .ds-item {
                     padding: 8px 20px;
                     display: block;
                     color: ${(props) => props.theme?.header?.textColor || '#222'};

                     &.hover,
                     &:hover {
                        background: rgba(0, 0, 0, 0.04);
                        text-decoration: none;
                        color: ${(props) =>
                           props.theme?.header?.textColorActiveMenu || GetThemeVar(props.theme, 'primary')};
                     }

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

               &.hover,
               &:hover {
                  &:before {
                     transform: translateY(0px);
                     visibility: visible;
                     opacity: 1;
                  }

                  .ds-menu-subcategory {
                     transform: translateY(0px);
                     visibility: visible;
                     opacity: 1;
                  }
               }
            }
         }

         @media only screen and (max-width: 820px) {
            display: none;
         }
      }

      .ds-menu-mobile {
         display: none;
      }

      .menu-bullet-dot {
         padding-right: 15px;
         span {
            width: 4px;
            height: 4px;
            border-radius: 100%;
            background: white;
            vertical-align: middle;
            display: inline-block;
         }
      }

      @media only screen and (max-width: 820px) {
         height: 55px;
         overflow: hidden;
         position: fixed;
         width: 100%;
         top: 0px;

         &.ds-menu-mobile-opened {
            height: 100%;
            overflow-y: scroll;
         }

         .ds-menu-mobile {
            padding: 10px 0px;
            position: relative;
            display: block;

            .ds-menu-item {
               display: block;
               padding: 15px 10px;
               font-weight: 500;
               border-radius: 0px;
               color: ${(props) => props.theme?.header?.textColorMenu || 'white'};
               transition: 0.15s all;
               margin: 0px 3px;
               position: relative;
               font-size: 15px;
               border-top: 1px solid rgba(255, 255, 255, 0.1);
               opacity: 0.6;

               &:hover {
                  cursor: pointer;
                  color: white;
                  transition: 0.15s all;
                  text-decoration: none;
               }

               &.ds-menu-item-active {
                  background: ${(props) =>
                     props.theme?.header?.textColorActiveMenu || GetThemeVar(props.theme, 'primary')};
                  color: white;
                  border-top: 1px solid
                     ${(props) => props.theme?.header?.textColorActiveMenu || GetThemeVar(props.theme, 'primary')};
                  opacity: 1;
               }
            }

            .ds-menu-category {
               display: block;
               position: relative;

               .ds-menu-item {
                  &.ds-menu-item-active {
                     background: transparent;
                     color: white;
                     border-top: 1px solid rgba(255, 255, 255, 0.1);
                  }

                  &:hover {
                     background: transparent;
                     color: ${(props) => props.theme?.header?.textColor || '#fff'};
                     cursor: pointer;
                  }
               }

               .ds-menu-subcategory {
                  color: ${(props) => props.theme?.header?.textColor || '#fff'};
                  padding: 10px 0px;
                  padding-top: 0px;

                  .ds-item {
                     padding: 10px 30px;
                     display: block;
                     font-size: 14px;
                     color: ${(props) => props.theme?.header?.textColor || '#fff'};
                     opacity: 0.6;

                     &:hover {
                        background: rgba(0, 0, 0, 0.04);
                        color: white;
                        text-decoration: none;
                     }

                     &.active {
                        text-decoration: none;
                        color: white;
                        opacity: 1;

                        .menu-bullet-dot {
                           span {
                              background: ${(props) =>
                                 props.theme?.header?.textColorMenu || GetThemeVar(props.theme, 'primary')};
                           }
                        }
                     }
                  }
               }
            }
         }

         .username-info {
            text-align: left;
            padding: 10px;
            width: 100%;

            .name {
               font-weight: 500;
               font-size: 15px;
               color: white;
            }

            .role {
               font-size: 13px;
               color: rgba(255, 255, 255, 0.63);
            }

            .ds-menu {
               margin-top: 5px;
               padding-top: 5px;
               border-top: 1px solid rgba(255, 255, 255, 0.18);

               .ds-item {
                  cursor: pointer;
                  padding: 7px 15px;
                  display: block;
                  text-decoration: none;

                  color: rgba(255, 255, 255, 0.6);

                  &:hover {
                     background: rgba(255, 255, 255, 0.1);
                     color: rgba(255, 255, 255, 1);
                     text-decoration: none;
                  }
               }
            }
         }
      }
   }
`;
