import styled from "styled-components";

import Button from "../Button";

const Wrapper = styled.div`
  display: flex;
  position: relative;
  width: 100%;
`;

const FieldWrapper = styled.div<{ closeOnInactive: boolean; disabled: boolean }>`
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  width: 100%;
  column-gap: ${(p) => p.theme.spacing.xs};
  padding-inline: ${(p) => p.theme.spacing.s};
  border-color: ${(p) =>
		p.disabled
			? p.theme.color.interactiveDisabled
			: p.closeOnInactive
				? p.theme.color.interactive01
				: p.theme.color.uiLine};
  border-width: 1px;
  border-style: solid;
  border-radius: ${(p) => p.theme.radii.s};
  &:focus-within {
    border-color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
  }
`;

const Input = styled.input<{
	closeOnInactive: boolean;
	disabled: boolean;
	small?: boolean;
	inputSize: "L" | "M" | "S" | "XS" | "XXS";
}>`
  ${(p) => p.theme.textStyle.fieldContent};
  color: ${(p) => p.theme.color.textHighEmphasis};
  background-color: ${(p) => p.theme.color.interactiveBackground};
  height: ${(p) => (p.inputSize === "XXS" ? "32px" : p.inputSize === "XS" ? "40px" : p.theme.spacing.l)};
  border: none;
  border-radius: ${(p) => p.theme.radii.s};
  margin-right: auto;
  flex: 1 1 auto;
  min-width: unset;
  max-width: unset;
  width: 100%;
  &:active,
  &:focus {
    outline: none;
  }

  /*
  width: ${(p) =>
		p.small || ["S", "XS", "XXS"].includes(p.inputSize)
			? `calc(${p.theme.spacing.xl} * 2)`
			: p.inputSize === "L"
				? `calc(${p.theme.spacing.xl} * 6)`
				: `calc(${p.theme.spacing.xl} * 4)`};
  */
`;

const IconSearchWrapper = styled.div<{ onClick?: () => void; disabled: boolean }>`
  margin-left: auto;
  height: ${(p) => p.theme.spacing.m};
  cursor: ${(p) => (p.onClick ? "pointer" : "default")};
  svg {
    path {
      fill: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
    }
  }
`;

const HelpText = styled.div<{ hide?: boolean }>`
  display: ${(p) => (p.hide ? "none" : "block")};
  visibility: ${(p) => (p.hide ? "hidden" : "visible")};
  min-width: fit-content;
  ${(p) => p.theme.textStyle.uiXS};
  color: ${(p) => p.theme.color.textLowEmphasis};
  font-style: italic;
`;

const CloseWrapper = styled.div`
  cursor: pointer;
  display: flex;
  min-width: fit-content;
`;

const CloseButton = styled(Button)`
  margin: 0 !important; 
`;

const FilterWrapper = styled.div`
  min-width: fit-content;
`;

const Separator = styled.div`
  border-right: 1px solid ${(p) => p.theme.color.uiLine};
  height: ${(p) => p.theme.spacing.m};
  margin-right: ${(p) => p.theme.spacing.xs};
  margin-left: ${(p) => p.theme.spacing.s};
`;

export {
	CloseButton,
	CloseWrapper,
	FieldWrapper,
	FilterWrapper,
	HelpText,
	IconSearchWrapper,
	Input,
	Separator,
	Wrapper,
};
