import styled from '@emotion/styled';

// Color constants for EQ UI
export const EQ_COLORS = {
  primaryBlue: 'rgb(59, 130, 246)', // blue-500
  primaryBlueTransparent40: 'rgba(59, 130, 246, 0.4)', // blue-500 at 40% opacity
  primaryBlueTransparent0: 'rgba(59, 130, 246, 0)', // blue-500 at 0% opacity
  toggleGray: 'rgb(75, 85, 99)', // gray-600
  disabledGray: 'rgb(107, 114, 128)', // gray-500
  white: 'rgb(255, 255, 255)',
  black: 'rgb(16, 16, 18)', // background primary
  darkGray: 'rgb(37, 37, 41)', // background tertiary
} as const;

export const EQContainer = styled.div`
  position: relative;
  height: 120px;
  background-color: ${EQ_COLORS.black};
  border-radius: 4px;
  overflow: hidden;
`;

export const EQCanvas = styled.canvas`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
`;

export const EQDot = styled.div<{
  x: number;
  y: number;
  isHovered: boolean;
  isDragging: boolean;
  isSelected?: boolean;
  isInactive?: boolean;
  label: string;
}>`
  position: absolute;
  width: ${(props) =>
    props.isDragging || props.isSelected
      ? '22px'
      : props.isHovered
        ? '18px'
        : '8px'};
  height: ${(props) =>
    props.isDragging || props.isSelected
      ? '22px'
      : props.isHovered
        ? '18px'
        : '8px'};
  border-radius: 50%;
  background-color: ${(props) =>
    props.isDragging || props.isSelected
      ? EQ_COLORS.primaryBlue
      : EQ_COLORS.white};
  border: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
  left: ${(props) => props.x * 100}%;
  top: ${(props) => (1 - props.y) * 100}%;
  z-index: 10;
  opacity: ${(props) =>
    props.isInactive &&
    !props.isHovered &&
    !props.isDragging &&
    !props.isSelected
      ? 0.3
      : 1};
  transition:
    width 0.15s ease,
    height 0.15s ease,
    background-color 0.15s ease,
    opacity 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: ${EQ_COLORS.white};
  user-select: none;

  &:active {
    cursor: none;
    box-shadow: 0 0 8px color-mix(in srgb, ${EQ_COLORS.black} 50%, transparent);
  }

  &::before {
    display: flex;
    align-items: center;
    justify-content: center;
    content: ${(props) =>
      props.isDragging || props.isSelected
        ? `'${props.label}'`
        : props.isHovered
          ? '""'
          : 'none'};
    width: ${(props) =>
      props.isHovered && !props.isDragging && !props.isSelected
        ? '8px'
        : '100%'};
    height: ${(props) =>
      props.isHovered && !props.isDragging && !props.isSelected
        ? '8px'
        : '100%'};
    border-radius: 50%;
    background-color: ${(props) =>
      props.isHovered && !props.isDragging && !props.isSelected
        ? EQ_COLORS.primaryBlue
        : 'transparent'};
    transition:
      width 0.15s ease,
      height 0.15s ease;
  }
`;

export const ValueItem = styled.span`
  font-weight: 500;
`;

export const FilterControls = styled.div`
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background-color: var(--color-background-glass-thin);
  color: color-mix(in srgb, ${EQ_COLORS.white} 70%, transparent);
`;

export const FilterDot = styled(EQDot)``;