import { css } from "@emotion/react";
import styled from "@emotion/styled";
import { Padding, Spacing } from "@uipath/apollo-core";
const INDENTATION_WIDTH = 26;
const STAGE_CONTENT_PADDING_X = 14;
const STAGE_BORDER_WIDTH = 2;
const STAGE_CONTENT_INSET = 2 * STAGE_CONTENT_PADDING_X + 2 * STAGE_BORDER_WIDTH;
const StageContainer = styled.div`
  position: relative;
  min-width: 288px;
  width: ${({ width })=>width ? `${width}px` : 'auto'};
  background: var(--canvas-background);
  border: ${STAGE_BORDER_WIDTH}px solid var(--canvas-border-de-emp);
  border-radius: ${Spacing.SpacingBase};
  display: flex;
  flex-direction: column;
  cursor: pointer;

  ${({ selected })=>selected ? css`
          border-color: var(--canvas-primary);
          outline: 4px solid var(--canvas-secondary-pressed);
        ` : css`
          &:hover {
            outline: 4px solid var(--canvas-secondary-pressed);
          }
        `}

  ${({ status })=>'Completed' === status && css`
      border-color: var(--canvas-success-icon);
    `}

  ${({ status })=>'InProgress' === status && css`
      border-color: var(--canvas-info-icon);
    `}

  ${({ status })=>'Paused' === status && css`
      border-color: var(--canvas-warning-icon);
    `}

  ${({ status })=>'Failed' === status && css`
      border-color: var(--canvas-error-icon);
    `}

  ${({ status })=>'NotExecuted' === status && css`
      opacity: 0.8;
    `}
`;
const StageHeader = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  padding: ${Spacing.SpacingS} ${Spacing.SpacingBase};
  border-bottom: solid 1px var(--canvas-border-de-emp);
  background: ${(props)=>props.isException ? 'var(--color-background-secondary)' : 'var(--canvas-background)'};
  border-radius: ${Spacing.SpacingBase} ${Spacing.SpacingBase} 0 0;
  overflow: hidden;
`;
const StageContent = styled.div`
  padding: 15px ${STAGE_CONTENT_PADDING_X}px ${Spacing.SpacingBase} ${STAGE_CONTENT_PADDING_X}px;
  border-radius: 0 0 ${Spacing.SpacingBase} ${Spacing.SpacingBase};
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
`;
const StageTaskList = styled.div`
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: ${Spacing.SpacingS};
`;
const StageTaskGroupContainer = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  gap: ${Spacing.SpacingS};
  width: ${({ isParallel })=>isParallel ? 'var(--stage-task-width-parallel, 216px)' : 'var(--stage-task-width, 246px)'};
`;
const StageParallelLabel = styled.div`
  position: absolute;
  left: -52px;
  top: 50%;
  padding: 0px ${Padding.PadM};
  display: flex;
  justify-content: center;
  background: var(--canvas-background);
  transform: translateY(-50%) rotate(-90deg);
  color: var(--canvas-foreground-de-emp);
  text-transform: capitalize;
  letter-spacing: 0.3px;
  white-space: nowrap;
`;
const StageParallelBracket = styled.div`
  margin-left: ${Padding.PadM};
  width: ${Spacing.SpacingXs};
  flex: 1;
  border: 1.5px solid var(--canvas-border-de-emp);
  border-right: none;
`;
const StageTaskWrapper = styled.div`
  width: ${({ isParallel })=>isParallel ? 'var(--stage-task-width-parallel, 216px)' : 'var(--stage-task-width, 246px)'};
  border-radius: ${Spacing.SpacingXs};
  height: 36px;
`;
const StageTask = styled.div`
  position: relative;
  display: flex;
  align-items: center;
  gap: ${Spacing.SpacingXs};
  padding: ${Padding.PadS} ${Padding.PadM};
  background: var(--canvas-background);
  border: 1px ${({ isPlaceholder })=>isPlaceholder ? 'dashed' : 'solid'}
    var(--canvas-border-de-emp);
  border-radius: ${Spacing.SpacingXs};
  color: var(--canvas-foreground);
  transition: all 0.2s ease;
  min-height: 36px;
  width: ${({ isParallel, isDragEnabled })=>isDragEnabled ? '100%' : isParallel ? 'var(--stage-task-width-parallel, 216px)' : 'var(--stage-task-width, 246px)'};
  height: ${({ isDragEnabled })=>isDragEnabled ? '100%' : 'auto'};

  .task-menu-icon-button {
    display: flex;
  }

  ${({ status })=>'InProgress' === status && css`
      border-color: var(--canvas-info-icon);
    `}

  ${({ status })=>'Completed' === status && css`
      border-color: var(--canvas-success-icon);
    `}

  ${({ status })=>'Paused' === status && css`
      border-color: var(--canvas-warning-icon);
    `}

  ${({ status })=>'Failed' === status && css`
      border-color: var(--canvas-error-icon);
    `}

  ${({ selected })=>selected ? css`
          border-color: var(--canvas-primary);
          outline: 4px solid var(--canvas-secondary-pressed);
        ` : css`
          &:hover {
            border-color: var(--canvas-primary);
            outline: 4px solid var(--canvas-secondary-pressed);
          }
        `}
`;
const StageTaskIcon = styled.div`
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  svg {
    width: 16px;
    height: 16px;
  }
`;
const StageTaskRetryDuration = styled.div`
  display: flex;
  align-items: center;
  ${({ status })=>'info' === status && css`
      color: var(--canvas-info-text);
    `}

  ${({ status })=>'warning' === status && css`
      color: var(--canvas-warning-text);
    `}

  ${({ status })=>'error' === status && css`
      color: var(--canvas-error-text);
    `}
`;
const StageTaskDragPlaceholderWrapper = styled.div`
  width: var(--stage-task-width, 246px);
  height: 36px;
`;
const StageHeaderChipsRow = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: ${Padding.PadS};
  margin-top: ${Spacing.SpacingXs};
`;
const StageChip = styled.button`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: ${Padding.PadS};
  padding: ${Padding.PadXs} ${Spacing.SpacingXs};
  border-radius: 10px;
  border: 1px solid var(--canvas-border-de-emp);
  background: transparent;
  color: var(--canvas-foreground);
  cursor: pointer;

  &:hover {
    background: var(--color-background-hover);
  }

  &:focus-visible {
    outline: 2px solid var(--canvas-primary);
    outline-offset: 2px;
  }
`;
const StageAdditionalTasksSection = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${Spacing.SpacingS};
`;
const StageAdditionalTasksHeaderSection = styled.div`
  height: 36px;
  display: flex;
  align-items: center;
`;
const StageTaskDragPlaceholder = styled.div`
  display: flex;
  align-items: center;
  gap: ${Spacing.SpacingXs};
  padding: ${Padding.PadL} ${Padding.PadXxl};
  background: transparent;
  border: 2px dashed var(--canvas-selection-indicator);
  border-radius: 6px;

  height: 100%;
  width: ${({ isTargetParallel })=>isTargetParallel ? 'var(--stage-task-width-parallel, 216px)' : 'var(--stage-task-width, 246px)'};
`;
export { INDENTATION_WIDTH, STAGE_BORDER_WIDTH, STAGE_CONTENT_INSET, STAGE_CONTENT_PADDING_X, StageAdditionalTasksHeaderSection, StageAdditionalTasksSection, StageChip, StageContainer, StageContent, StageHeader, StageHeaderChipsRow, StageParallelBracket, StageParallelLabel, StageTask, StageTaskDragPlaceholder, StageTaskDragPlaceholderWrapper, StageTaskGroupContainer, StageTaskIcon, StageTaskList, StageTaskRetryDuration, StageTaskWrapper };
