import styled from 'styled-components';
import { InputFieldProps } from '../../interfaces';

type WrapperProps = {
  error?: boolean;
} & Pick<
  InputFieldProps,
  | 'variant'
  | 'iconLeft'
  | 'iconRight'
  | 'width'
  | 'height'
  | 'fullWidth'
  | 'withEmojis'
  | 'characterLimit'
  | 'fontSize'
  | 'fontWeight'
  | 'margin'
>;

export const Wrapper = styled.div<WrapperProps>`
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  width: ${({ width, fullWidth }) => (fullWidth ? '100%' : width || '400px')};

  margin: ${({ margin }) =>
    margin && `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`};

  z-index: ${({ error }) => (error ? 2 : 0)};
  &:focus-within {
    z-index: 1;
  }

  input,
  textarea {
    font-family: ${({ theme }) => theme.fonts.primary}, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    text-align: left;
    -webkit-appearance: none;
    resize: unset;
    background: ${({ theme }) => theme.colors.neutral[0]};
    border: 1px solid
      ${({ theme, error }) =>
        error ? theme.colors.error[700] : theme.colors.neutral[100]};
    color: ${({ theme }) => theme.colors.neutral[900]};
    display: block;
    font-size: ${({ fontSize }) => `${fontSize || 16}px`};
    font-weight: ${({ fontWeight }) => fontWeight || 400};
    line-height: 22px;
    outline: 0;
    width: 100%;
    height: ${({ height }) => `${height || 42}px`};
    border-radius: 6px;
    margin-top: 8px;

    &:focus {
      border: 1px solid
        ${({ theme, error }) =>
          error ? theme.colors.error[700] : theme.colors.neutral[800]};
    }

    &:disabled {
      background: ${({ theme }) => theme.colors.neutral[50]};
      border: 1px solid ${({ theme }) => theme.colors.neutral[100]};
    }

    &::placeholder {
      font-family: ${({ theme }) => theme.fonts.primary}, sans-serif;
      color: ${({ theme }) => theme.colors.neutral[500]};
      line-height: 17.5px;
    }

    ${({ iconLeft, iconRight }) =>
      `
      padding: 12px ${!!iconRight ? '38px' : '12px'} 12px ${
        !!iconLeft ? '38px' : '12px'
      };
    `}
  }

  textarea {
    height: ${({ withEmojis, characterLimit }) =>
      withEmojis || characterLimit ? '164px' : '132px'};
    ${({ withEmojis, characterLimit }) =>
      `
      padding: 10px 12px ${withEmojis || characterLimit ? '40px' : '10px'} 12px;
    `}
  }

  input:read-only {
    color: #848080;
    cursor: not-allowed;
    background: ${({ theme }) => theme.colors.neutral[50]};
  }

  .emoji-mart-anchors svg {
    position: unset;
    bottom: unset;
    right: unset;
    top: unset;
  }
`;

export const InputWrapper = styled.div`
  position: relative;
`;

export const ErrorMessageWrapper = styled.div`
  display: flex;
  justify-content: flex-end;
  width: 100%;
`;

export const InfoPanel = styled.div`
  position: absolute;
  right: 1px;
  left: 1px;
  bottom: 1px;
  height: 40px;
  background-color: #fff;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  box-shadow: 0px -4px 4px ${({ theme }) => theme.colors.neutral[0]};
`;

type IconWrapperProps = { iconPosition?: 'left' | 'right' };

export const IconWrapper = styled.div<IconWrapperProps>`
  position: absolute;
  bottom: 6px;

  ${({ iconPosition }) =>
    iconPosition === 'left' ? 'left: 8px;' : 'right: 8px;'}
`;

export const EmojiToggle = styled.button`
  position: absolute;
  right: 6px;
  bottom: 24px;
  border: none;
  background: none;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.0784314);
  border-radius: 6px;
  display: flex;
  justify-content: center;

  svg {
    align-self: center;
    position: unset;
    bottom: unset;
    right: unset;
    top: unset;
  }
`;