/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';
import Input from 'components/forms/Input';
import Theme from 'theme';

const {spacing, colors, typography, primaryBorderRadius} = Theme;

export const DropdownContainer = styled.default.div`
  width: 100%;
  position: relative;
  margin: ${spacing.xSmall} 0;
`;

export const DropdownInput = styled.default(Input)<{showMenu?: boolean}>`
  ${({showMenu}) =>
    showMenu &&
    styled.css`
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
      border-bottom-width: 0;
    `}
`;

export const DropdownMenu = styled.default.div`
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  top: calc(100% - 4px);
  position: absolute;
  height: auto;
  max-height: 210px;
  border: 1px solid ${colors.gray400};
  border-top-width: 0;
  z-index: 4;
  background-color: ${colors.white};
  border-bottom-left-radius: ${primaryBorderRadius};
  border-bottom-right-radius: ${primaryBorderRadius};
`;

export const DropdownMenuItem = styled.default.div<{
  active?: boolean;
  disabled?: boolean;
  selected?: boolean;
}>`
  line-height: ${spacing.large};
  padding: ${spacing.xsmall} ${spacing.medium};
  font-size: ${typography.fontSizeS};
  word-wrap: break-word;
  ${({active, selected, disabled}) => styled.css`
    background-color: ${active || selected ? colors.gray300 : 'transparent'};
    font-weight: ${selected ? 'bold' : 'normal'};
    color: ${disabled ? colors.gray500 : colors.gray900}

    :hover{
      background-color: ${disabled ? colors.white : colors.gray300};
      cursor: ${disabled ? 'text' : 'pointer'};
    }
  `}
`;