import { css, styled } from "styled-components";
import { gridUnit, theme, Text as T } from "@local-logic/core/ui";
import { motion } from "framer-motion";

export const BarChartContainer = styled.div<{ $isUsingIcons: boolean }>`
  position: relative;
  display: grid;
  grid-template-columns: ${({ $isUsingIcons }) =>
    $isUsingIcons ? "auto auto 1fr auto" : "auto 1fr auto"};
  align-items: center;
  grid-column-gap: ${theme["--ll-spacing-x-small"]};
  width: 100%;
`;

export const BarChartBackground = styled.div`
  height: ${gridUnit * 2}px;
  width: 100%;
  border-radius: ${gridUnit}px;
  background-color: ${theme["--ll-color-surface-variant1"]};
  position: relative;
  overflow: hidden;
`;

export const BarChartLine = styled(motion.div)<{ $renderForPrint?: boolean }>`
  position: absolute;
  height: 100%;
  border-radius: ${gridUnit}px;
  min-width: ${gridUnit * 2}px;
  background: ${({ $renderForPrint }) =>
    $renderForPrint === true
      ? css`
          ${theme["--ll-color-primary"]}
        `
      : css`linear-gradient(
    to right,
    ${theme["--ll-color-primary-variant1"]},
    ${theme["--ll-color-primary"]}
  )`};
`;

export const ScoreMarker = styled.div<{
  val: number;
  markerType: "city" | "neighbourhood";
}>`
  position: absolute;
  height: 100%;
  top: 0;
  left: ${({ val }) => val * 10}%;
  transform: translateX(-1px);
  border-right: ${({ markerType }) =>
    `4px ${markerType === "city" ? "solid" : "dotted"} ${
      theme["--ll-color-on-background"]
    }`};
`;

export const ScoreMarkerNumber = styled.div<{ position: "top" | "bottom" }>`
  position: absolute;
  top: ${({ position }) => position === "top" && "-18px"};
  bottom: ${({ position }) => position === "bottom" && "-18px"};
  transform: translateX(calc(-50% + 2px));
  left: 0;
`;

export const DistrictTextContainer = styled.div<{ $maxWidth: number }>`
  display: flex;
  max-width: ${({ $maxWidth }) => $maxWidth}px;
`;

export const DistrictText = styled(T)`
  margin-right: 4px;
`;

export const AverageText = styled.span`
  flex-shrink: 0;
`;