import React, { useState } from 'react';
import styled from 'styled-components';
import { DraggableContainer } from '../DraggableContainer';
import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
import { Tab } from './Tab';

interface ITab {
  label: string;
  id: string;
}

export enum MultitabType {
  Brown = 'brown',
  Gray = 'gray',
}

export interface ITabsContainer {
  children: React.ReactNode;
  onCloseButton?: () => void;
  tabs: ITab[];
  type: MultitabType;
  styles?: {
    width?: string;
    minWidth?: string;
    minHeight?: string;
    height?: string;
    className?: string;
    title?: string;
    imgSrc?: string;
    imgWidth?: string;
  };
  isDraggableModal?: boolean;
}

export const TabsContainer: React.FC<ITabsContainer> = ({
  children,
  onCloseButton,
  tabs,
  type = MultitabType.Brown,
  styles = {},
  isDraggableModal = false,
}) => {
  const [selectedTab, setSelectedTab] = useState(tabs[0].id);

  const onRenderTabs = () =>
    tabs.map((tab, index) => (
      <Tab
        type={type}
        active={selectedTab === tab.id}
        label={tab.label}
        key={`${tab.label}_${index}`}
        onPointerDown={() => setSelectedTab(tab.id)}
      />
    ));

  const onGetContainerType = () => {
    switch (type) {
      case MultitabType.Brown:
        return RPGUIContainerTypes.FramedGold;
      case MultitabType.Gray:
        return RPGUIContainerTypes.Framed;
      default:
        return RPGUIContainerTypes.Framed;
    }
  };

  const TabsCore = () => (
    <>
      {onRenderTabs()}
      <BodyContainer
        selectedTab={selectedTab}
        className={`${type} tabs-container`}
      >
        {children}
      </BodyContainer>
    </>
  );

  if (isDraggableModal) {
    return (
      <DraggableContainer
        onCloseButton={onCloseButton}
        type={onGetContainerType()}
        cancelDrag=".tabs-container *"
        width={styles?.width}
        height={styles?.height}
        minWidth={styles?.minWidth}
        minHeight={styles?.minHeight}
        className={styles?.className}
        title={styles?.title}
        imgSrc={styles?.imgSrc}
        imgWidth={styles?.imgWidth}
      >
        {TabsCore()}
      </DraggableContainer>
    );
  }

  return (
    <NonDraggableWrapper
      width={styles?.width}
      height={styles?.height}
      minWidth={styles?.minWidth}
      minHeight={styles?.minHeight}
    >
      {TabsCore()}
    </NonDraggableWrapper>
  );
};

interface IBodyContainer {
  selectedTab: string;
}

const BodyContainer = styled.div<IBodyContainer>`

  display: flex; 
  width: 100%;
  height: 100%;
  justify-content: space-between;

  /* hide everything that is not data-tab-id selectedTab */
  & > *:not([data-tab-id=${props => props.selectedTab}]) {
    display: none;
  }

  &.brown {
    border: 0.25rem solid #996D55;
    background-color: #BF886A;
  }
  
  &.gray {
    border: 0.25rem solid rgba(0, 0, 0, 0.25);
    background-color: #4E4A4E;
  }
 
  border-radius: 5px; 
  padding: 0.5rem; 
`;

interface INonDraggableWrapperProps {
  width?: string;
  height?: string;
  minWidth?: string;
  minHeight?: string;
}

const NonDraggableWrapper = styled.div<INonDraggableWrapperProps>`
  height: ${props => props.height || 'auto'};
  width: ${props => props.width || '50%'};
  min-width: ${props => props.minWidth || 'auto'};
  min-height: ${props => props.minHeight || 'auto'};
  display: flex;
  flex-wrap: wrap;
  image-rendering: pixelated;
  overflow-y: hidden;
  padding-top: 1.5rem;
  position: relative;
`;
