import styled from 'styled-components';
import { GetThemeVar } from '../../../support/GetThemeVar';
import { ThemeDefault } from '../../../types/theme.interface';

export const ImageContainer = styled.div<any>`
   margin: 5px;
   position: relative;
   overflow: hidden;
   border-radius: 10px;

   .cover {
      width: 140px;
      height: 140px;
      background-color: black;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      transition: 0.2s all;
      border-radius: 10px;
   }

   .icon-close,
   .icon-rotate-left,
   .icon-rotate-right {
      cursor: pointer;
      position: absolute;
      background: black;
      color: white;
      width: 26px;
      height: 26px;
      line-height: 26px;
      font-size: 14px;
      text-align: center;
      border-radius: 100px;
      transition: 0.15s all;

      &:hover {
         background: ${(props) => GetThemeVar(props.theme, 'primary')};
         color: ${(props) => GetThemeVar(props.theme, 'primaryTextInside')};
      }
   }

   .icon-rotate-left {
      left: 5px;
      bottom: 5px;
   }

   .icon-rotate-right {
      left: 40px;
      bottom: 5px;
   }

   .icon-close {
      right: 5px;
      top: 5px;
      z-index: 50;
   }

   .item {
      position: relative;
      display: flex;
      flex-grow: 1;
      align-items: center;
      border: 2px solid black;
      outline: none;
      box-sizing: border-box;
      list-style: none;
      background: black;
      transform-origin: 50% 50%;
      border-radius: 10px;
      -webkit-tap-highlight-color: transparent;

      color: $text-color;
      font-weight: $font-weight;
      font-size: 1rem;
      white-space: nowrap;

      transform: scale(var(--scale, 1));
      transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);

      &:focus-visible {
         box-shadow: 0 0px 4px 1px $focused-outline-color, $box-shadow;
      }

      &:not(.withHandle) {
         touch-action: none;
         user-select: none;
         -webkit-user-select: none;
         cursor: grab;
      }

      &.dragging:not(.dragOverlay) {
         border: 2px dashed red;
         background: transparent;

         .cover {
            opacity: 0;
         }

         &:focus {
            box-shadow: $box-shadow;
         }
      }

      &.disabled {
         color: #999;
         background-color: #f1f1f1;
         &:focus {
            box-shadow: 0 0px 4px 1px rgba(0, 0, 0, 0.1), $box-shadow;
         }
         cursor: not-allowed;
      }

      &.dragOverlay {
         cursor: inherit;
         /* box-shadow: 0 0px 6px 2px $focused-outline-color; */
         animation: pop 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
         transform: scale(var(--scale));
         box-shadow: var(--box-shadow-picked-up);
         opacity: 1;
      }

      &.color:before {
         content: '';
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         left: 0;
         height: 100%;
         width: 3px;
         display: block;
         border-top-left-radius: 3px;
         border-bottom-left-radius: 3px;
         background-color: var(--color);
      }

      &:hover {
         .Remove {
            visibility: visible;
         }
      }
   }

   .loading {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 21;
      background: rgba(255, 255, 255, 0.8);
      line-height: initial;
      top: 0px;
      left: 0px;

      .progress-loading {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 80%;

         .value {
            font-size: 14px;
            text-align: center;
            color: ${(props) => GetThemeVar(props.theme, 'primary')};
            font-weight: 600;
         }

         .load-bar {
            height: 7px;
            background: #222;
            width: 80%;
            margin: auto;
            position: relative;
            border-radius: 100px;
            overflow: hidden;

            .load-bar-finish {
               transition: 0.15s all;
               background: ${(props) => GetThemeVar(props.theme, 'primary')};
               width: 80%;
               height: 100%;
            }
         }
      }
   }

   .error-container {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 21;
      background: rgba(255, 255, 255, 0.8);
      line-height: initial;
      top: 0px;
      left: 0px;

      .error {
         position: absolute;
         color: ${(props) => GetThemeVar(props.theme, 'red')};
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 80%;
         text-align: center;
         line-height: 1;

         svg {
            font-size: 34px;
            margin: auto;
            margin-bottom: 10px;
            display: block;
            text-align: center;
         }

         button {
            font-weight: bold;
            font-size: 12px;
            text-transform: uppercase;
            padding: 5px 10px;
            border: none;
            color: white;
            margin-top: 10px;
            background: ${(props) => GetThemeVar(props.theme, 'primary')};
         }
      }
   }
`;
