import styled from 'styled-components';
import { convertToTransientProps, getSpacing, getFontSize, getColorAlias, getDefaultTransition, getDarkenColor } from '../../utils/index.js';
import { getTabsColor } from './utils.js';

const Wrapper = styled.div `
  display: flex;
  position: relative;
  flex-direction: column;
  direction: ${(props) => (props.rtl ? 'rtl' : 'ltr')};
  max-width: 100%;
`;
const InnerWrapper = styled.div `
  display: grid;
  grid-template-columns: 85% 15%;
  overflow: hidden;
  position: relative;
`;
const TabsContainer = styled.div `
  display: flex;
  position: relative;
  padding: 1px;
  overflow-x: scroll;
  scroll-behavior: smooth;
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none; /* IE and Edge */
`;
const TabWrapper = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps([
        'narrow',
        'selected',
        'disabled',
    ]),
}) `
  display: flex;
  justify-content: center;
  align-items: center;
  padding: ${(props) => (props.narrow ? '12px' : '8px 16px')};
  border-radius: ${(props) => props.theme.radius.roundedA};
  width: ${(props) => (props.narrow ? '70%' : 'fit-content')};
  margin-bottom: ${getSpacing('s01')};
  ${(props) => getTabsColor(props)}
  font-family: ${(props) => props.theme.font.familyPrimary};
  ${getFontSize('size16')};
  font-weight: ${(props) => props.theme.font.weightBold};
  outline-color: ${getColorAlias('focusOuter')};
  max-width: 400px;
  cursor: pointer;
  ${getDefaultTransition('background')}

  &:hover {
    background: ${getDarkenColor('hover01', 'containerDefault')};
  }
  &:active {
    background: ${getDarkenColor('active01', 'containerDefault')};
  }
`;
const TabIndicator = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['brandColor']),
}) `
  position: absolute;
  width: ${(props) => props.width}px;
  bottom: 0;
  left: ${(props) => props.left}px;
  height: 4px;
  border-top-left-radius: ${(props) => props.theme.radius.roundedA};
  border-top-right-radius: ${(props) => props.theme.radius.roundedA};
  background: ${(props) => getColorAlias(props.brandColor ? 'interactiveBrand' : 'interactivePrimary')};
  transition: ${({ theme }) => `${theme.motion.speed.defaultS} ${theme.motion.easing.easeDefault}`};
`;
const ExpandWrapper = styled.div `
  position: absolute;
  padding: 8px 16px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  border: none;
  margin-bottom: 16px;
  transform: translate(0, -50%);
  top: 50%;
  left: ${(props) => props.left}px;
  min-width: 84px;
  min-height: ${(props) => props.minHeight}px;
`;
const TabList = styled.div ``;
const ExpandedTabItem = styled.div `
  padding: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-bottom: 1px solid ${getColorAlias('dividerDefault')};

  &:hover {
    background: ${getDarkenColor('hover01', 'containerDefault')};
  }
  &:active {
    background: ${getDarkenColor('active01', 'containerDefault')};
  }

  svg {
    fill: ${getColorAlias('contentSubdued')};
    stroke: ${getColorAlias('contentSubdued')};
  }
`;
const ExpandedItemText = styled.div `
  display: flex;
  flex-direction: column;
  width: 95%;
  padding-right: 20px;
`;
const ExpandedLabel = styled.span `
  font-weight: ${(props) => props.selected
    ? props.theme.font.weightBold
    : props.theme.font.weightRegular};
  ${getFontSize('size16')};
`;
const ExpandedSecondary = styled.span `
  ${getFontSize('size14')};
  color: ${getColorAlias('contentSubdued')};
`;
const DismissWrapper = styled.div `
  padding-top: ${getSpacing('s04')};
  margin: 0 auto;
  width: 95%;
`;
styled.div `
  border-bottom: 1px solid ${getColorAlias('borderDefault')};
  width: 100%;
`;
styled.div `
  height: 500px;
  width: 100%;
  font-family: ${(props) => props.theme.font.familyPrimary};
`;

export { DismissWrapper, ExpandWrapper, ExpandedItemText, ExpandedLabel, ExpandedSecondary, ExpandedTabItem, InnerWrapper, TabIndicator, TabList, TabWrapper, TabsContainer, Wrapper };
