import { useState } from 'react';

import './ResponsiveWidget.scss';

export type ResponsiveMode =
  | 'desktop'
  | 'laptop'
  | 'tablet'
  | 'mobileLandscape'
  | 'mobile';

interface Props {
  responsiveMode: ResponsiveMode;
  setResponsiveMode: (mode: ResponsiveMode) => void;
  expanded?: boolean;
  expandDirection?: 'right' | 'up';
  backgroundClass?: string;
}

export default function ResponsiveWidget({
  responsiveMode,
  setResponsiveMode,
  expanded = false,
  expandDirection = 'right',
  backgroundClass = 'default-bg',
}: Props) {
  const [isExpanded, setIsExpanded] = useState(expanded);

  const isIsExpanded = expanded || isExpanded;
  return (
    <div
      className={`responsive-widget ${
        isIsExpanded ? 'responsive-widget--expanded' : ''
      }`}
      onClick={() => setIsExpanded(!isExpanded)}
    >
      <div
        className={`responsive-widget__container ${backgroundClass} ${
          isIsExpanded
            ? `${
                expandDirection === 'up'
                  ? 'responsive-widget__container--expanded-up'
                  : 'responsive-widget__container--expanded-right'
              }`
            : `${
                expandDirection === 'up'
                  ? 'responsive-widget__container--not-expanded-up'
                  : 'responsive-widget__container--not-expanded-right'
              }`
        }`}
      >
        <div
          className={`desktop-btn ${
            responsiveMode === 'desktop'

              ? `desktop-btn--active ${
                  // Active
                  isIsExpanded
                    ? ''
                    : `${
                        expandDirection === 'up'
                          ? 'desktop-btn--active--not-expanded-up'
                          : 'desktop-btn--active--not-expanded-right'
                      }`
                }`
              : '' //Inactive
          } ${isIsExpanded ? `desktop-btn--visible` : 'desktop-btn--hidden'} ${
            expandDirection === 'up'
              ? 'desktop-btn--expanded-up'
              : 'desktop-btn--expanded-right'
          }`}
          onClick={() => setResponsiveMode('desktop')}
        >
          <i className='fa-regular fa-display' />
        </div>
        <div
          className={`laptop-btn ${
            responsiveMode === 'laptop'
              ? `laptop-btn--active ${
                  // Active
                  isIsExpanded
                    ? ''
                    : `${
                        expandDirection === 'up'
                          ? 'laptop-btn--active--not-expanded-up'
                          : 'laptop-btn--active--not-expanded-right'
                      }`
                }`
              : '' //Inactive
          } ${isIsExpanded ? `laptop-btn--visible` : 'laptop-btn--hidden'} ${
            expandDirection === 'up'
              ? 'laptop-btn--expanded-up'
              : 'laptop-btn--expanded-right'
          }`}
          onClick={() => setResponsiveMode('laptop')}
        >
          <i className='fa-regular fa-laptop' />
        </div>
        <div
          className={`tablet-btn ${
            responsiveMode === 'tablet'
              ? `tablet-btn--active ${
                  //Active
                  isIsExpanded
                    ? ''
                    : `${
                        expandDirection === 'up'
                          ? 'tablet-btn--active--not-expanded-up'
                          : 'tablet-btn--active--not-expanded-right'
                      }`
                }`
              : '' //Inactive
          } ${isIsExpanded ? `tablet-btn--visible` : 'tablet-btn--hidden'} ${
            expandDirection === 'up'
              ? 'tablet-btn--expanded-up'
              : 'tablet-btn--expanded-right'
          }`}
          onClick={() => setResponsiveMode('tablet')}
        >
          <i className='fa-regular fa-tablet' />
        </div>
        <div
          className={`mobile-landscape-btn ${
            responsiveMode === 'mobileLandscape'
              ? `mobile-landscape-btn--active ${
                  isIsExpanded
                    ? ''
                    : `${
                        expandDirection === 'up'
                          ? 'mobile-landscape-btn--active--not-expanded-up'
                          : 'mobile-landscape-btn--active--not-expanded-right'
                      }`
                }`
              : ''
          } ${
            isIsExpanded
              ? `mobile-landscape-btn--visible`
              : `mobile-landscape-btn--hidden`
          } ${
            expandDirection === 'up'
              ? 'mobile-landscape-btn--expanded-up'
              : 'mobile-landscape-btn--expanded-right'
          }`}
          onClick={() => setResponsiveMode('mobileLandscape')}
        >
          <i className='fa-regular fa-mobile -rotate-90' />
        </div>
        <div
          className={`mobile-portrait-btn ${
            responsiveMode === 'mobile'
              ? `mobile-portrait-btn--active  ${
                  isIsExpanded
                    ? ''
                    : `${
                        expandDirection === 'up'
                          ? 'mobile-portrait-btn--active--not-expanded-up'
                          : 'mobile-portrait-btn--active--not-expanded-right'
                      }`
                }`
              : ''
          } ${
            isIsExpanded
              ? `mobile-portrait-btn--visible`
              : `mobile-portrait-btn--hidden`
          } ${
            expandDirection === 'up'
              ? 'mobile-portrait-btn--expanded-up'
              : 'mobile-portrait-btn--expanded-right'
          }`}
          onClick={() => setResponsiveMode('mobile')}
        >
          <i className='fa-regular fa-mobile' />
        </div>
      </div>
    </div>
  );
}
