import styled from 'styled-components';
import { animated } from 'react-spring';
import { ExpandableDrawerDirection } from '.';
import { ThemeInterface } from '../../typings/styled-components';

export const DrawerContainer = styled.div`
  width: 100%;
  z-index: 1000;
  ${({ stickToBottom }: { stickToBottom: boolean }) =>
    stickToBottom &&
    `	position: fixed;
			bottom: 0;`}
`;

type DrawHeaderProps = {
  headerHeight: number;
  stickToBottom: boolean;
  isExpanded: boolean;
  expandDirection: ExpandableDrawerDirection;
};

export const DrawerHeader = styled.div<DrawHeaderProps>`
  ${({ headerHeight }) => `  height: ${headerHeight}px;`}
  background: ${({ theme }) => theme.colors.primary[100]};
  position: relative;
  bottom: 0;
  background: ${({ theme }) => theme.colors.primary[100]};
  ${({ theme, stickToBottom, isExpanded, expandDirection }) =>
    generateHeaderBoarder(theme, stickToBottom, isExpanded, expandDirection)}
  padding: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5000;
`;
export const DrawerHeaderLeftContent = styled.div`
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
  align-items: center;
`;

type ExpandedContentContainerProps = {
  $isExpanded: boolean;
  $expandDirection: ExpandableDrawerDirection;
  $stickToBottom: boolean;
};

export const ExpandedContentContainer = styled(
  animated.div
)<ExpandedContentContainerProps>`
  ${({ $isExpanded, $expandDirection, theme, $stickToBottom }) =>
    $isExpanded && !$stickToBottom
      ? generateExpandedContentContainerBorders($expandDirection, theme)
      : ''}
`;

const generateExpandedContentContainerBorders = (
  expandDirection: ExpandableDrawerDirection,
  theme: ThemeInterface
) => {
  const borderToInclude =
    convertExpandableDrawerDirectionToCssProperty(expandDirection);
  return `
		border-left: 1px solid ${theme.colors.primary[700]};
		border-right: 1px solid ${theme.colors.primary[700]};
		border-${borderToInclude}: 1px solid ${theme.colors.primary[700]};
		border-${borderToInclude}-right-radius: 5px;
		border-${borderToInclude}-left-radius: 5px;
		overflow: hidden;
	`;
};

const generateHeaderBoarder = (
  theme: ThemeInterface,
  stickToBottom: boolean,
  isExpanded: boolean,
  expandDirection: ExpandableDrawerDirection
) => {
  return stickToBottom
    ? `border-top 1px solid ${theme.colors.primary[700]};`
    : showAllBordersIfClosedOtherwiseHideExpandedBorder(
        theme,
        isExpanded,
        expandDirection
      );
};

const showAllBordersIfClosedOtherwiseHideExpandedBorder = (
  theme: ThemeInterface,
  isExpanded: boolean,
  expandDirection: ExpandableDrawerDirection
) => {
  const borderClosestToExpansion =
    convertExpandableDrawerDirectionToCssProperty(expandDirection);
  return isExpanded
    ? `border: 1px solid ${theme.colors.primary[700]}; border-radius: 5px; border-${borderClosestToExpansion}: none; border-${borderClosestToExpansion}-left-radius: 0; border-${borderClosestToExpansion}-right-radius: 0;`
    : `border: 1px solid ${theme.colors.primary[700]}; border-radius: 5px;`;
};

const convertExpandableDrawerDirectionToCssProperty = (
  expandDirection: ExpandableDrawerDirection
) => {
  return expandDirection === ExpandableDrawerDirection.UP ? 'top' : 'bottom';
};

export const ExpandIconContainer = styled(animated.div)`
  display: flex;
  justify-content: center;
  align-items: center;
`;