import { PktIcon } from '../icon/Icon'
import { DateTags } from './DateTags'
import type { IDatepickerState } from './types'

export const DatepickerInputs = ({ state }: { state: IDatepickerState }) => {
  const {
    id,
    inputId,
    values,
    dateformat,
    multiple,
    range,
    showRangeLabels,
    disabled,
    readOnly,
    required,
    label,
    name,
    placeholder,
    hasError,
    helptext,
    minStr,
    maxStr,
    inputType,
    isIOSDevice,
    strings,
    inputClasses,
    buttonClasses,
    rangeLabelClasses,
    datepickerInputsClasses,
    isInputDisabled,
    inputRef,
    inputRefTo,
    btnRef,
    toggleCalendar,
    handleFocus,
    handleSingleInputChange,
    handleRangeFromChange,
    handleRangeToChange,
    handleRangeBlur,
    handleMultipleBlur,
    handleTagRemoved,
    handleSingleKeydown,
    handleRangeFromKeydown,
    handleRangeToKeydown,
    handleMultipleKeydown,
    restProps,
  } = state

  const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {
    e.preventDefault()
    toggleCalendar()
  }

  const handleInputTouchEnd = (e: React.TouchEvent<HTMLInputElement>) => {
    e.preventDefault()
    toggleCalendar()
  }

  const renderCalendarButton = () => (
    <button
      ref={btnRef}
      className={buttonClasses}
      type="button"
      onClick={toggleCalendar}
      disabled={disabled}
      aria-label={strings.calendar?.buttonAltText ?? 'Åpne kalender'}
    >
      <PktIcon name="calendar" />
      <span className="pkt-btn__text">{strings.calendar?.buttonAltText ?? 'Åpne kalender'}</span>
    </button>
  )

  if (multiple) {
    return (
      <>
        <DateTags
          dates={values}
          dateformat={dateformat}
          idBase={id}
          strings={strings}
          onDateRemoved={handleTagRemoved}
        />
        <div className="pkt-datepicker__inputs">
          <div className="pkt-input__container">
            <input
              {...restProps}
              ref={inputRef}
              className={inputClasses}
              type={inputType}
              id={inputId}
              name={name ?? id}
              placeholder={placeholder}
              readOnly={readOnly || (isIOSDevice && !readOnly)}
              disabled={isInputDisabled}
              aria-describedby={helptext ? `${id}-helptext` : undefined}
              aria-invalid={hasError}
              aria-errormessage={hasError ? `${id}-error` : undefined}
              onClick={handleInputClick}
              onTouchEnd={handleInputTouchEnd}
              onKeyDown={handleMultipleKeydown}
              onFocus={handleFocus}
              onBlur={handleMultipleBlur}
            />
            {renderCalendarButton()}
          </div>
        </div>
      </>
    )
  }

  if (range) {
    return (
      <div className={datepickerInputsClasses}>
        <div className="pkt-input__container">
          {showRangeLabels && <div className="pkt-input-prefix">{strings.generic?.from ?? 'Fra'}</div>}
          <input
            {...restProps}
            ref={inputRef}
            className={inputClasses}
            type={inputType}
            id={inputId}
            name={name ? `${name}-from` : `${id}-from`}
            value={values[0] ?? ''}
            min={minStr}
            max={maxStr}
            placeholder={placeholder}
            readOnly={readOnly || (isIOSDevice && !readOnly)}
            disabled={disabled}
            required={required}
            aria-label={`${label} ${strings.generic?.from ?? 'Fra'}`}
            aria-describedby={helptext ? `${id}-helptext` : undefined}
            aria-invalid={hasError}
            aria-errormessage={hasError ? `${id}-error` : undefined}
            onClick={handleInputClick}
            onTouchEnd={handleInputTouchEnd}
            onKeyDown={handleRangeFromKeydown}
            onFocus={handleFocus}
            onBlur={handleRangeBlur}
            onChange={handleRangeFromChange}
          />
          <div className={rangeLabelClasses} id={`${id}-to-label`}>
            {strings.generic?.to ?? 'Til'}
          </div>
          {!showRangeLabels && <div className="pkt-input-separator">–</div>}
          <input
            ref={inputRefTo}
            className={inputClasses}
            type={inputType}
            id={`${id}-to`}
            name={name ? `${name}-to` : `${id}-to`}
            value={values[1] ?? ''}
            min={minStr}
            max={maxStr}
            readOnly={readOnly || (isIOSDevice && !readOnly)}
            disabled={disabled}
            aria-label={`${label} ${strings.generic?.to ?? 'Til'}`}
            aria-invalid={hasError}
            onClick={handleInputClick}
            onTouchEnd={handleInputTouchEnd}
            onKeyDown={handleRangeToKeydown}
            onFocus={handleFocus}
            onBlur={handleRangeBlur}
            onChange={handleRangeToChange}
          />
          {renderCalendarButton()}
        </div>
      </div>
    )
  }

  // Single mode
  return (
    <div className="pkt-datepicker__inputs">
      <div className="pkt-input__container">
        <input
          {...restProps}
          ref={inputRef}
          className={inputClasses}
          type={inputType}
          id={inputId}
          name={name ?? id}
          value={values[0] ?? ''}
          min={minStr}
          max={maxStr}
          placeholder={placeholder}
          readOnly={readOnly || (isIOSDevice && !readOnly)}
          disabled={disabled}
          required={required}
          aria-describedby={helptext ? `${id}-helptext` : undefined}
          aria-invalid={hasError}
          aria-errormessage={hasError ? `${id}-error` : undefined}
          onClick={handleInputClick}
          onTouchEnd={handleInputTouchEnd}
          onKeyDown={handleSingleKeydown}
          onFocus={handleFocus}
          onBlur={undefined}
          onChange={handleSingleInputChange}
        />
        {renderCalendarButton()}
      </div>
    </div>
  )
}