import styled from 'styled-components';

type IsMobileProps = {
  width?: string;
  height?: string;
  isMobile: boolean;
  fontSize?: string;
};

export const Wrapper = styled.div<IsMobileProps>`
  position: relative;
  width: ${({ isMobile, width }) =>
    width ? width : isMobile ? '100%' : 'min-content'};
  display: flex;
`;

export const StyledInput = styled.input<IsMobileProps & { showClear: boolean }>`
  width: ${({ isMobile, width }) =>
    width ? width : isMobile ? '100%' : '612px'};
  height: ${({ isMobile, height }) =>
    height ? height : isMobile ? '40px' : '56px'};
  background: ${({ theme }) => theme.colors.neutral[0]};
  border: 1px solid ${({ theme }) => theme.colors.neutral[100]};
  border-radius: 5px;
  padding: ${({ isMobile, showClear }) =>
    getInputPadding({ isMobile, showClear })};
  color: ${({ theme }) => theme.colors.neutral[800]};

  font-family: 'GT America';
  font-style: normal;
  font-weight: 400;
  font-size: ${({ isMobile, fontSize }) =>
    fontSize ? fontSize : isMobile ? '16px' : '24px'};
  line-height: 32px;
  letter-spacing: -0.01em;

  &::placeholder {
    color: ${({ theme }) => theme.colors.neutral[400]};
  }

  &:hover {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
  }

  .search-input-icon {
    fill: ${({ theme }) => theme.colors.primary[800]} !important;
  }

  &:focus {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
    outline: none;
    border: 1px solid ${({ theme }) => theme.colors.primary[800]};
  }
`;

export const IconWrapper = styled.div<IsMobileProps>`
  position: absolute;
  top: 0;
  bottom: 0;
  left: ${({ isMobile }) => (isMobile ? '12px' : '17px')};
  display: flex;
  align-items: center;
`;

export const SearchButtonWrapper = styled.div<IsMobileProps>`
  position: ${({ isMobile }) => (isMobile ? 'relative' : 'absolute')};
  top: 0;
  bottom: 0;
  right: ${({ isMobile }) => (isMobile ? '-4px' : '12px')};
  display: flex;
  align-items: center;
`;

export const ClearButtonWrapper = styled.div<IsMobileProps>`
  position: absolute;
  top: 0;
  bottom: 0;
  right: ${({ isMobile }) => (isMobile ? '80px' : '83px')};
  display: flex;
  align-items: center;

  button {
    width: 30px;
    height: 30px;
    background: ${({ theme }) => theme.colors.neutral[50]};
    border: 1px solid ${({ theme }) => theme.colors.neutral[100]};
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;

    > * {
      flex-shrink: 0;
    }
  }
`;

const getInputPadding = ({ isMobile = false, showClear = false }) => {
  if (isMobile) {
    // mobile with clear button
    if (showClear) return '0 40px 0 36px';
    // mobile with no clear button
    return '0 10px 0 36px';
  }
  // desktop with clear button
  if (showClear) return '0 121px 0 51px';
  // desktop with no clear button
  return '0 90px 0 51px';
};