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

import { Cell, Row } from "@ax/components/TableList/TableItem/style";
import { ActionMenu } from "@ax/components";

const CheckCell = styled(Cell)<{ hasHandle: boolean }>`
  width: 24px;
  padding: ${(p) =>
		p.hasHandle ? `${p.theme.spacing.s} ${p.theme.spacing.xs}` : `0 ${p.theme.spacing.s} 0 ${p.theme.spacing.m}`};
  label {
    margin-bottom: 18px;
  }
`;

const NameCell = styled(Cell)`
  ${(p) => p.theme.textStyle.uiM};
  color: ${(p) => p.theme.color.textHighEmphasis};
  flex: 0 0 350px;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
`;

const Order = styled.div`
  color: ${(p) => p.theme.color.textMediumEmphasis};
  margin-right: ${(p) => p.theme.spacing.xxs};
`;

const DescriptionCell = styled(Cell)`
  ${(p) => p.theme.textStyle.uiXS};
  color: ${(p) => p.theme.color.textMediumEmphasis};
  flex: 1;
  a {
    color: ${(p) => p.theme.color.interactive01};
    font-weight: 600;
  }
`;

const AppliedOnCell = styled(Cell)`
  ${(p) => p.theme.textStyle.uiXS};
  color: ${(p) => p.theme.color.textMediumEmphasis};
  flex: 0 0 200px;
`;

const CodeCell = styled(Cell)`
  flex: 0 0 130px;
  align-items: center;
`;

const ContentPresence = styled.span`
  ${(p) => p.theme.textStyle.uiXS};
  color: ${(p) => p.theme.color.textHighEmphasis};
`;

const StateCell = styled(Cell)`
  flex: 0 0 100px;
  align-items: center;
`;

const ActionsCell = styled(Cell)`
  flex: 0 0 85px;
`;

const ModalContent = styled.div`
  padding: ${(p) => p.theme.spacing.m};

  p {
    margin-bottom: ${(p) => p.theme.spacing.m};
  }
`;

const StyledActionMenu = styled(ActionMenu)`
  opacity: 0;
  width: 32px;
  display: flex;
  margin-left: auto;
`;

const ItemRow = styled(Row)<{
	disabled: boolean;
	clickable: boolean;
	cssTransform: Transform | null;
	transition?: string;
}>`
  cursor: ${(p) => (p.disabled ? "default" : "pointer")};
  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
  transform: ${(p) => CSS.Transform.toString(p.cssTransform)};
  transition: ${(p) => p.transition};
  &:hover {
    cursor: pointer;
    ${StyledActionMenu} {
      opacity: 1;
    }
  }
`;

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

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 Tag = styled.div<{ color: string }>`
  ${(p) => p.theme.textStyle.uiXS};
  display: flex;
  background-color: ${(p) => p.color};
  box-sizing: border-box;
  border-radius: ${(p) => p.theme.radii.s};
  color: ${(p) => p.theme.color.textHighEmphasis};
  white-space: nowrap;
  padding: 3px 8px;
  text-transform: capitalize;
`;

const IconTag = styled.div`
  height: ${(p) => p.theme.spacing.s};
  width: ${(p) => p.theme.spacing.s};
  margin-right: ${(p) => p.theme.spacing.xxs};
  svg {
    path {
      fill: ${(p) => p.theme.color.textHighEmphasis};
    }
  }
`;

export {
	CheckCell,
	NameCell,
	DescriptionCell,
	AppliedOnCell,
	StateCell,
	ActionsCell,
	ItemRow,
	ContentPresence,
	ModalContent,
	StyledActionMenu,
	HandleWrapper,
	IconHandleWrapper,
	Order,
	CodeCell,
	Tag,
	IconTag,
};
