import styled from "styled-components";
import { cardSizesHorizontal } from "./Globals.js";

const getBoardWrapperStyles = (props) => {
  if (props.orientation === "vertical") {
    return ``;
  }
  if (props.orientation === "horizontal") {
    return `
          white-space: nowrap;
    `;
  }
};

const getSectionStyles = (props) => {
  const { orientation, cardSettings } = props;

  const getMinWidth = () => {
    switch (cardSettings?.cardSize ?? "small") {
      case "small":
        return cardSizesHorizontal.small;
      case "large":
        return cardSizesHorizontal.large;
      case "medium":
        return cardSizesHorizontal.medium;
      default:
        return cardSizesHorizontal.small;
    }
  };

  if (orientation === "horizontal") {
    return `
      display: inline-flex;
      flex-direction: column;
      min-width: ${getMinWidth()};
    `;
  }
  return `
    margin-bottom: 10px;
  `;
};

const getLaneFooterStyles = (props) => {
  if (props.operation === "horizontal") {
    return `
      height: 50px;
      margin-top: 20px;
  `;
  }
  return `
    height: 25px;
  `;
};

export const StyleHorizontal = styled.div`
  .react-trello-lane {
    width: 100%;
    height: 100%;
    min-height: 1px;
    overflow-y: visible;
    overflow-x: visible;
  }

  .react-trello-lane.lane-collapsed {
    min-height: 15px;
  }

  .ant-card-body {
    padding: 4px;
  }

  .item-wrapper {
    display: flex;
    flex: 1 1 auto;
    white-space: nowrap;
  }

  .react-trello-column-header {
    min-height: 15px;
    padding: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .react-trello-card {
    height: auto;
    margin: 2px 0 2px;
  }

  .size-memory-wrapper {
    display: flex;
    flex-direction: column;
  }

  .size-memory-wrapper .ant-card {
    flex-grow: 1;
    width: 100%;
  }
`;

export const StyleVertical = styled.div`
  .react-trello-column-header {
    min-height: 15px;
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }

  .react-trello-lane {
    min-height: 5px;
    height: 100%;
  }

  .react-trello-lane.lane-collapsed {
    min-height: 5px;
  }

  .react-trello-card {
    flex: 0 1 auto;
    width: 100%;
    height: 100%;
  }

  .grid-container {
    display: flex;
    flex-wrap: wrap;
  }

  .grid-item {
    display: flex;
    width: ${(props) => props.gridItemWidth};
    align-content: stretch;
    box-sizing: border-box;
  }

  .item-wrapper {
    width: 100%;
  }

  .react-trello-board {
    display: flex;
  }

  .ant-card-body {
  }

  .size-memory-wrapper {
    display: flex;
    flex-direction: column;
  }

  .size-memory-wrapper .ant-card {
    flex-grow: 1;
    width: 100%;
  }

  .react-trello-lane .lane-collapsed {
    min-height: 5px;
  }
`;

export const BoardWrapper = styled.div`
  color: var(--board-text-color);
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  ${getBoardWrapperStyles};
`;

export const Section = styled.section`
  background-color: var(--section-bg);
  border-radius: 3px;
  margin: 2px 2px;
  height: 100%;
  ${getSectionStyles};
`;

export const LaneFooter = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  ${getLaneFooterStyles};
`;

export const ScrollableLane = styled.div`
  flex: 1;
  min-width: 250px;
  overflow-x: hidden;
  align-self: center;
  flex-direction: column;
  justify-content: space-between;
`;

export const Detail = styled.div`
  font-size: 12px;
  color: var(--detail-text-color);
  white-space: pre-wrap;
`;
