import styled from "styled-components";
import { fonts } from "../../../styles/fonts";
import { primary, gray } from "../../../core/colors/colors";
import {
  DropdownInput,
  DropdownOptions,
} from "../SingleDropdown/SingleDropdown.styled";

export const MultipleDropdownInput = styled(DropdownInput)`
  border: 1px solid;
  border-radius: 8px;
`;

export const SelectedValueContainer = styled.section<{
  placeholder?: string;
  disable?: boolean;
}>`
  max-width: max-content;

  margin: 10px 17px 10px 16px;
  margin-bottom: ${({ placeholder }) => !placeholder && "2px"};

  display: flex;
  flex-wrap: wrap;

  z-index: 10;

  &::after {
    content: ${({ placeholder }) => `"${placeholder}"`};

    color: ${({ disable }) => (disable ? gray[400] : gray[300])};
  }

  & > article {
    margin: 0 8px 8px 0;

    padding: 2px 4px;

    border-radius: 4px;

    display: flex;
    align-items: center;
    gap: 4px;

    background-color: ${({ disable }) => (disable ? gray[300] : primary[100])};

    & > p {
      color: ${({ disable }) => (disable ? gray[500] : primary[500])};

      ${fonts["caption-b"]}
    }

    & > button {
      width: 16px;
      height: 16px;

      border: 0;

      background-color: ${({ disable }) =>
        disable ? gray[300] : primary[100]};

      cursor: ${({ disable }) => !disable && "pointer"};

      svg {
        width: 100%;
        height: 100%;

        stroke: ${({ disable }) => (disable ? gray[400] : primary[300])};
      }
    }
  }
`;

export const MultipleDropdownOptions = styled(DropdownOptions)`
  .jsx_element {
    & > button {
      height: 40px;

      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 8px;

      & > p {
        padding-right: 16px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      & > span {
        margin-left: auto;
      }
    }
  }

  & > section > button {
    gap: 8px;
  }
`;
