import { ActionMenu } from "@ax/components";

import { CSS, type Transform } from "@dnd-kit/utilities";
import styled from "styled-components";

const StyledActionMenu = styled((props) => <ActionMenu {...props} />)`
  width: ${(p) => p.theme.spacing.m};
  height: ${(p) => p.theme.spacing.m};
  opacity: 0;
`;

const Item = styled.li<{ cssTransform: Transform | null; transition?: string; margin: boolean; isDragging: boolean }>`
  position: relative;
  display: flex;
  align-items: stretch;
  background-color: ${(p) => p.theme.color.uiBarBackground};
  border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
  border-radius: ${(p) => p.theme.radii.s};
  padding: ${(p) =>
		p.margin
			? p.theme.spacing.s
			: `${p.theme.spacing.s} ${p.theme.spacing.s} ${p.theme.spacing.s} ${p.theme.spacing.xs}`};
  margin-bottom: ${(p) => p.theme.spacing.xxs};
  cursor: pointer;
  transform: ${(p) => CSS.Transform.toString(p.cssTransform)};
  transition: ${(p) => p.transition};
  &:hover {
    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
    ${StyledActionMenu} {
      opacity: 1;
    }
  }
  &:focus,
  &:focus-within,
  &:active {
    background-color: ${(p) => (p.isDragging ? p.theme.color.overlayHoverPrimary : p.theme.color.overlayFocusPrimary)};
    outline: ${(p) => (p.isDragging ? "none" : `2px solid ${p.theme.color.interactive01}`)};
    ${StyledActionMenu} {
      opacity: 1;
    }
  }
`;

const TextWrapper = styled.div`
  position: relative;
  width: 100%;
`;

const Header = styled.div`
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: ${(p) => p.theme.spacing.xxs};
`;

// biome-ignore lint/suspicious/noShadowRestrictedNames: conflicts with js Date
const Date = styled.div`
  ${(p) => p.theme.textStyle.uiXS};
  color: ${(p) => p.theme.color.textMediumEmphasis};
  flex-shrink: 0;
  margin-left: auto;
  margin-right: ${(p) => p.theme.spacing.xxs};
`;

const Type = styled.div`
  ${(p) => p.theme.textStyle.headingXS};
  color: ${(p) => p.theme.color.textLowEmphasis};
`;

const Title = styled.div`
  ${(p) => p.theme.textStyle.uiL};
  font-weight: 400;
  color: ${(p) => p.theme.color.textHighEmphasis};
`;

const ButtonsWrapper = styled.span`
  display: flex;
  position: absolute;
  bottom: ${(p) => p.theme.spacing.xs};
  right: ${(p) => p.theme.spacing.xs};
`;

const HandleWrapper = styled.div<{ hidden?: boolean }>`
  display: ${(p) => (p.hidden ? "none" : "flex")};
  align-items: center;
  padding-right: ${(p) => p.theme.spacing.xs};
`;

const IconHandleWrapper = styled.div`
  width: ${(p) => p.theme.spacing.s};
  height: ${(p) => p.theme.spacing.s};
  svg {
    path {
      fill: ${(p) => p.theme.color.textLowEmphasis};
    }
  }
`;

const Slug = styled.span`
  ${({ theme }) => theme.textStyle.uiXS};
  color: ${({ theme }) => theme.colors.textMediumEmphasis};
`;

export {
	ButtonsWrapper,
	Date,
	HandleWrapper,
	Header,
	IconHandleWrapper,
	Item,
	Slug,
	StyledActionMenu,
	TextWrapper,
	Title,
	Type,
};
