/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import React, {ChangeEvent, forwardRef, ForwardedRef, InputHTMLAttributes} from 'react';
import * as styled from 'styled-components';
import Theme from 'theme';
import {Label} from './label';

export interface IInput extends InputHTMLAttributes<HTMLInputElement> {
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
  error?: boolean;
  icon?: React.JSX.Element;
  imagePath?: string;
  imageAltText?: string;
  label?: string;
  labelColor?: string;
  labelIcon?: React.JSX.Element;
  labelClassName?: string;
  helperText?: string;
  helperTextClassName?: string;
  width?: number | string;
}

const {colors, typography, formFieldWidth, formFieldMaxWidth, primaryBorderColor, primaryBorderRadius, primaryInputHeight, inputIconWidth, spacing} = Theme;

export const InputElement = styled.default.input<IInput>`
  background-color: ${colors.white};
  border: 1px solid ${({error}) => (error ? colors.lightRed : primaryBorderColor)};
  border-radius: ${primaryBorderRadius};
  display: block;
  font-size: ${typography.primaryFontSize};
  height: ${primaryInputHeight};
  line-height: ${typography.primaryLineHeight};
  outline: none;
  padding: ${spacing.small} ${({icon, imagePath}) => (icon || imagePath ? spacing.xlarge : spacing.small)};
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  background-position: 1rem center;
  background-repeat: no-repeat;
  width: inherit;
  opacity: ${({disabled}) => (disabled ? 0.8 : 1)};
  cursor: ${({disabled}) => disabled && 'not-allowed'};
  -webkit-text-fill-color: ${({disabled}) => disabled && colors.gray800};
`;
const HelperText = styled.default.p<IInput>`
  color: ${({error}) => (error ? colors.lightRed : colors.gray600)};
  font-weight: 400;
  font-size: ${typography.fontSizeS};
  margin-top: ${spacing.xxSmall};
`;
const ImageWrapper = styled.default.div`
  width: ${inputIconWidth}px;
  height: ${inputIconWidth}px;
  z-index: 1;
  top: calc(50% - ${inputIconWidth / 2}px);
  left: 8px;
  position: absolute;
  display: flex;
  align-items: center;

  & img, svg {
    width: ${inputIconWidth}px;
    height: ${inputIconWidth}px;
  }
`;
const InputWrapper = styled.default.div`
  width: 100%;
  position: relative;
`;

export const InputComponentWrapper = styled.default.div<IInput>`
  position: relative;
  width: ${({width}) => (width && isNaN(+width) ? width : (width || formFieldWidth) + 'px')};
  max-width: ${formFieldMaxWidth}px;
  display: flex;
  flex-direction: column;
`;
export const InputComponent = forwardRef(
  (
    {
      label,
      labelColor,
      labelIcon,
      labelClassName,
      icon,
      imagePath,
      imageAltText = '',
      helperText,
      helperTextClassName,
      error,
      width,
      disabled,
      name,
      ...props
    }: IInput,
    ref: ForwardedRef<HTMLInputElement>
  ): React.JSX.Element => {
    const InputIcon = icon || (imagePath && <img src={imagePath} alt={imageAltText} />);

    return (
      <InputComponentWrapper width={width}>
        {!!label && <Label text={label} color={labelColor} icon={labelIcon} className={labelClassName} />}
        <InputWrapper>
          <ImageWrapper>{InputIcon}</ImageWrapper>
          <InputElement icon={icon} name={name} imagePath={imagePath} disabled={disabled} ref={ref} {...props} />
        </InputWrapper>
        {!!helperText && (
          <HelperText className={helperTextClassName} error={error}>
            {helperText}
          </HelperText>
        )}
      </InputComponentWrapper>
    );
  }
);

export default InputComponent;
export const Input = InputComponent;
