import styled from "styled-components";
import type { IStyledProps } from "@ax/types";

const Wrapper = styled.button<{ disabled?: boolean }>`
  ${(p: IStyledProps) => p.theme.textStyle.fieldLabel};
  height: ${(p: IStyledProps) => p.theme.spacing.l};
  padding: 0 ${(p: IStyledProps) => p.theme.spacing.s};
  margin-bottom: ${(p: IStyledProps) => p.theme.spacing.m};
  color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textLowEmphasis)};
  background: transparent;
  border: 1px solid transparent;
  border-top-color: ${(p: IStyledProps) => p.theme.color.uiLine};
  border-bottom-color: ${(p: IStyledProps) => p.theme.color.uiLine};
  cursor: ${(p) => (p.disabled ? `default` : `pointer`)};
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  pointer-events: ${(p) => (p.disabled ? "none" : "auto")};

  &:before,
  &:after {
    display: none;
  }

  svg {
    height: ${(p: IStyledProps) => p.theme.spacing.m};

    path {
      fill: ${(p) => (p.disabled ? p.theme.color.iconNonActive : p.theme.color.textLowEmphasis)};
    }
  }

  &:hover {
    background: ${(p) => (p.disabled ? "transparet" : p.theme.color.overlayHoverPrimary)};
    color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textMediumEmphasis)};

    svg path {
      fill: ${(p) => (p.disabled ? p.theme.color.iconNonActive : p.theme.color.interactive01)};
    }
  }
`;

const Label = styled.p``;

const WrapperMultipleOptions = styled.button<{ disabled?: boolean }>`
  ${(p) => p.theme.textStyle.fieldLabel};
  color: ${(p) => p.theme.color.textHighEmphasis};
  position: relative;
  display: flex;
  width: 100%;
  height: ${(p) => p.theme.spacing.l};
  background: ${(p) => p.theme.color.uiBackground02};
  border: 1px solid transparent;
  margin-bottom: ${(p) => p.theme.spacing.xs};
  padding: 0 ${(p) => p.theme.spacing.s};
  border-radius: ${(p) => p.theme.radii.s};
  box-shadow: ${(p) => p.theme.shadow.shadowS};
  cursor: ${(p) => (p.disabled ? `default` : `pointer`)};
  justify-content: center;
  align-items: center;
  pointer-events: ${(p) => (p.disabled ? "none" : "auto")};

  &:hover {
    background: ${(p) => (p.disabled ? p.theme.color.uiBackground02 : p.theme.color.overlayHoverPrimary)};
  }

  &:focus,
  &:active {
    background: ${(p) => (p.disabled ? p.theme.color.uiBackground02 : p.theme.color.overlayFocusPrimary)};
    border: 1px solid ${(p) => (p.disabled ? "transparent" : p.theme.color.interactive01)};
    outline: none;
  }

  svg {
    path {
      fill: ${(p) => (p.disabled ? p.theme.color.iconNonActive : p.theme.color.interactive01)};
    }
  }
`;

export { Wrapper, Label, WrapperMultipleOptions };
