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

const {colors, spacing, primaryBorderRadius, fontSizeS, primaryInputHeight} = theme;

export const DropDownIcon = styled.default.span`
  position: absolute;
  top: .65rem;
  right: .8rem;
  color: ${colors.gray500};
`;

export const SimpleSelect = styled.default.select`
  margin: 4px 0;
`;

export const Select = styled.default.div<{showMenu?: boolean}>`
  border: 0;
  border-radius: ${primaryBorderRadius};

  ${({showMenu}) =>
    showMenu &&
    styled.css`
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-width: 0;

      ${DropDownIcon} {
        transform: rotate(180deg);
      }
    `}
`;

/* Stylelint-disable property-no-vendor-prefix */
export const SelectContainer = styled.default.div`
  select, ${Select} {
    padding: 0 ${paddings.small};
    width: 100%;
    min-width: 12.25rem;
    height: ${primaryInputHeight};
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    background-color: ${colors.white};
    border: none;
    cursor: pointer;
  }

  select {
    border-radius: ${primaryBorderRadius};
    appearance: none;
  }

  label {
    display: block;
  }
`;
/* Stylelint-enable property-no-vendor-prefix */

export const SelectedTagsContainer = styled.default.div`
  display: flex;
  flex-wrap: wrap;
`;

export const SelectDropDown = styled.default.div`
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 300px;
  border: 1px solid ${colors.gray400};
  z-index: 4;
  background-color: ${colors.white};
  display: flex;
  flex-direction: column;
  padding: ${paddings.small};
  ${Input} {
    width: 100%;
    display: inline-block;
  }
  border-top-width: 0;
  border-bottom-left-radius: ${primaryBorderRadius};
  border-bottom-right-radius: ${primaryBorderRadius};
`;

export const SelectItemsContainer = styled.default.div<{searchable?: boolean}>`
  ${({searchable}) =>
    searchable &&
    styled.css`
      max-height: calc(300px - 2.4rem);
      overflow-y: auto;
    `}
`;

export const SelectDropDownItem = styled.default.div`
  width: 100%;
  display: flex;
  height: ${primaryInputHeight};
  padding: ${paddings.xsmall};
  align-items: center;
  .drop-down-text {
    top: 0;
    margin: 0 ${spacing.xxSmall};
  }
`;

export const SubLabel = styled.default.p`
  color: ${colors.gray600};
  font-weight: 400;
  font-size: ${fontSizeS};
  margin-top: ${spacing.xxSmall};
`;
