import styled, { css } from 'styled-components';

const TimelineItemLine = styled.div`
  position: absolute;
  top: ${({ theme }) => theme.space.timeline.itemLinePositionTop};
  left: ${({ theme }) => theme.space.timeline.itemLinePositionLeft};
  height: ${({ theme }) => theme.sizes.timeline.itemLineHeight};
  border-left: ${({ theme }) => theme.sizes.timeline.itemLineWidth} solid
    ${({ theme }) => theme.colors.timeline.itemLineBg};
  margin: 0;
  padding: 0;
`;

const TimelineItemContentWrapper = styled.div`
  position: relative;
  margin: 0;
  padding: 0;
  margin-left: ${({ theme }) => theme.space.timeline.itemContentMarginLeft};
`;

const TimelineItemWrapper = styled.li`
  position: relative;
  margin: 0;
  padding: 0;
  padding-bottom: ${({ theme }) => theme.space.timeline.itemPaddingBottom};
  list-style: none;

  &:last-child {
    padding-bottom: 0;

    ${TimelineItemLine} {
      display: none;
    }
  }
`;

const TimelineWrapper = styled.ul`
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
`;

const TimelineItemMarker = styled.div<{
  themeIntent: 'success' | 'info' | 'warning' | 'danger' | 'error' | 'default';
}>`
  position: absolute;
  top: ${({ theme }) => theme.space.timeline.itemMarkerPositionTop};
  width: ${({ theme }) => theme.sizes.timeline.itemMarkerWidth};
  height: ${({ theme }) => theme.sizes.timeline.itemMarkerHeight};
  background-color: ${({ theme }) => theme.colors.timeline.itemMarkerBg};
  border-width: ${({ theme }) => theme.borderWidths.timeline.itemMarker};
  border-style: solid;
  border-radius: 50%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  ${({ themeIntent, theme }) => {
    switch (themeIntent) {
      case 'default':
        return css`
          border-color: ${theme.colors.timeline.itemMarkerDefault};
        `;
      case 'success':
        return css`
          border-color: ${theme.colors.timeline.itemMarkerSuccess};
        `;
      case 'info':
        return css`
          border-color: ${theme.colors.timeline.itemMarkerInfo};
        `;
      case 'warning':
        return css`
          border-color: ${theme.colors.timeline.itemMarkerWarning};
        `;
      case 'danger':
        return css`
          border-color: ${theme.colors.timeline.itemMarkerDanger};
        `;
      case 'error':
        return css`
          border-color: ${theme.colors.timeline.itemMarkerError};
        `;
    }
  }};
`;

const TimelineItemText = styled.div`
  font-size: ${({ theme }) => theme.fontSizes.timeline.itemText};
  line-height: ${({ theme }) => theme.lineHeights.timeline.itemText};
  font-weight: ${({ theme }) => theme.fontWeights.timeline.itemText};
  color: ${({ theme }) => theme.colors.timeline.itemText};
  margin: 0;
  padding: 0;
`;

const TimelineItemHelpText = styled.div`
  font-size: ${({ theme }) => theme.fontSizes.timeline.itemHelpText};
  line-height: ${({ theme }) => theme.lineHeights.timeline.itemHelpText};
  font-weight: ${({ theme }) => theme.fontWeights.timeline.itemHelpText};
  color: ${({ theme }) => theme.colors.timeline.itemHelpText};
  margin: 0;
  padding: 0;
`;

export {
  TimelineWrapper,
  TimelineItemWrapper,
  TimelineItemText,
  TimelineItemHelpText,
  TimelineItemContentWrapper,
  TimelineItemMarker,
  TimelineItemLine,
};