import styled, {css} from 'styled-components';

type InputProps = {
  isChecked?: boolean;
  onClick?: () => void;
  full?: boolean;
  third?: boolean;
  large?: boolean;
  spaced?: boolean;
  auto?: boolean;
  half?: boolean;
  option?: boolean;
  inputMode?: any;
};

export const RadioInputContainerStyles = css<InputProps>`
  width: 100%;
  height: 100%;
  max-width: ${props => (props.full ? '350px' : props.third ? '48%' : '45%')};
  min-width: ${props => (props.full ? '40%' : '')};
  height: ${props => (props.large ? '144px' : '90px')};
  border: 0px solid #ccd5db;
  background-color: ${props => (props.isChecked ? '#ff9e1b' : props.theme.colors.white)};
  box-shadow: 0px 2px 8px 2px rgba(0, 43, 73, 0.05);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  margin: 0px 10px 16px 10px;
  padding: 12px;
  font-weight: bold;
  color: ${props => props.theme.colors.navy100};

  ${({theme}) => `
    ${theme.media.desktop} {
      width: 40%;
    }
  `}

  input[type='checkbox'] {
    margin-left: auto;
    border-radius: 100px;
    -webkit-appearance: none;
    appearance: none;
  }

  input[type='radio'] {
    -webkit-appearance: none;
    appearance: none;
  }

  &:hover {
    cursor: pointer;
    background: #ff9e1b;
  }
`;

export const RadioInputContainer = styled.div`
  ${RadioInputContainerStyles};
  height: ${props => (props.large ? 'auto' : props.auto ? 'auto' : 'auto')};
`;

export const CheckboxInputContainer = styled.div`
  ${RadioInputContainerStyles};
  height: ${props => (props.large ? 'auto' : props.auto ? 'auto' : 'auto')};

  input[type='checkbox'] {
    display: ${props => (props.option ? 'none' : 'block')};
  }
`;

export const TextInputContainer = styled.div<InputProps>`
  width: ${props => (props.half ? '48%' : '100%')};
`;

export const FormTextInput = styled.input<InputProps>`
  background: ${props => props.theme.colors.white};
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  width: auto;
  height: auto;
  border: 1px solid #99aab6;
  box-sizing: border-box;
  border-radius: 8px;
  margin: 0px 10px;
  color: ${props => props.theme.colors.navy100};

  ${({theme}) => `
    ${theme.media.desktop} {
      width: auto;
    }
  `}

`;

export const AddressTextInput = styled.input`
  background: ${props => props.theme.colors.sky40};
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  height: 46px;
  border: 1px solid #99aab6;
  box-sizing: border-box;
  border-radius: 8px;
  width: 100%;
  margin-bottom: 14px;
`;

export const InputError = styled.p`
  color: red;
  border-radius: 5px;
  padding: 5px 15px;
  margin: 0 auto;
  letter-spacing: 0.8px;
  background-color: #ffeded;
`;