import Tabs, { tabsClasses } from '@mui/material/Tabs';
import React from 'react';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import styled from 'styled-components';
import { Colors } from '../constants';

const TabBar = styled.div`
  display: flex;
  flex-direction: column;
  overflow: hidden;
`;

const TabContainer = styled(Tabs)`
  background: ${Colors.white};
  border-block-end: 1px solid ${p => p.theme.palette.divider};
  padding-inline: 24px;

  .${tabsClasses.indicator} {
    background-color: ${p => p.theme.palette.primary.main};
  }
  .${tabsClasses.scroller} {
    border-block-end: 0;
  }
`;

const StyledTab = styled.div.attrs({ role: 'tab' })`
  color: ${props => props.theme.palette.text.tertiary};
  font-weight: 500;
  padding-block: 1.25rem;
  padding-inline: 12px;
  position: relative;

  cursor: grab;
  &:active {
    cursor: grabbing;
  }

  &:hover {
    background-color: ${p => p.theme.palette.action.hover};
  }

  &[aria-selected='true'] {
    color: ${props => props.theme.palette.primary.main};
  }

  &[data-dragging='true'] {
    opacity: 0.5;
  }
`;

const Icon = styled.i.attrs({ 'aria-hidden': true })`
  color: ${Colors.softText};
  font-size: 22px;
  margin-bottom: 0;
  margin-right: 5px;

  [aria-selected='true'] & {
    color: ${Colors.primary};
  }
`;

function getTabId(key) {
  return key ? `tab-${key}` : undefined;
}

function getTabPanelId(key) {
  return key ? `tabpanel-${key}` : undefined;
}

export const TabDisplayDraggable = ({
  tabs,
  currentTab,
  onTabSelect,
  className,
  scrollable = true,
  handleDragEnd,
  ...tabProps
}) => {
  tabs = tabs.map((t, index) => ({
    ...t,
    order: index,
  }));
  const currentTabData = tabs.find(t => t.key === currentTab);

  const onDragEnd = result => {
    handleDragEnd(result);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <TabBar className={className} data-testid="tabbar-zlyy">
        <Droppable droppableId="tab-display-droppable" direction="horizontal">
          {provided => (
            <TabContainer
              ref={provided.innerRef}
              variant={scrollable ? 'scrollable' : undefined}
              scrollButtons={scrollable ? 'auto' : false}
              value={currentTabData?.order ?? 0}
              {...provided.droppableProps}
              data-testid="tabcontainer-uai8"
            >
              {tabs.map(({ key, label, render, icon }, index) => (
                <Draggable
                  key={key}
                  draggableId={key}
                  index={index}
                  isDragDisabled={!render}
                  data-testid={`draggable-cehj-${key}`}
                >
                  {(provided, snapshot) => (
                    <StyledTab
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={provided.draggableProps.style}
                      id={getTabId(key)}
                      onClick={() => render && onTabSelect(key)}
                      aria-controls={getTabPanelId(key)}
                      aria-selected={currentTabData?.key === key}
                      data-dragging={snapshot.isDragging || undefined}
                      data-testid={`styledtab-ccs8-${key}`}
                    >
                      {icon && <Icon className={icon} data-testid={`icon-1iqd-${key}`} />}
                      {label}
                    </StyledTab>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </TabContainer>
          )}
        </Droppable>
        <div
          aria-labelledby={getTabId(currentTabData?.key)}
          id={getTabPanelId(currentTabData?.key)}
          role="tabpanel"
        >
          {currentTabData?.render(tabProps)}
        </div>
      </TabBar>
    </DragDropContext>
  );
};
