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

const IconWrapper = styled.div`
  opacity: 0;
  position: absolute;
  top: ${(p) => p.theme.spacing.xs};
  left: ${(p) => p.theme.spacing.xs};
  transition: opacity 0.1s;
  svg {
    path {
      fill: ${(p) => p.theme.color.interactive02};
    }
  }
`;

const StyledActionMenu = styled(ActionMenu)`
  opacity: 0;
  position: absolute;
  top: ${(p) => p.theme.spacing.xs};
  right: ${(p) => p.theme.spacing.xs};
  transition: opacity 0.1s;
  svg {
    path {
      fill: ${(p) => p.theme.color.interactive02};
    }
  }
`;

const ImageWrapper = styled.div<{ selected: boolean }>`
  position: relative;
  height: 188px;
  border: 1px solid;
  border-color: ${(p) => (p.selected === true ? p.theme.color.interactive02 : p.theme.color.uiLine)};
  flex-grow: 1;
  max-width: 500px;
  min-width: 150px;
  :before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 188px;
    opacity: ${(p) => (p.selected === true ? 1 : 0)};
    transition: opacity 0.1s;
    background-color: ${(p) => (p.selected === true ? p.theme.color.overlay : `transparent`)};
  }
  :hover {
    cursor: pointer;
    :before {
      background-color: ${(p) => p.theme.color.overlay};
      opacity: 1;
    }
    ${IconWrapper} {
      opacity: 1;
    }
    ${StyledActionMenu} {
      opacity: 1;
    }
  }
  img {
    max-width: 100%;
    min-width: 100%;
    height: 188px;
    object-fit: cover;
    vertical-align: bottom;
  }
  ${IconWrapper} {
    opacity: ${(p) => (p.selected === true ? 1 : 0)};
  }
`;

export { ImageWrapper, IconWrapper, StyledActionMenu };
