import { BaseEventOrig, Input, InputProps } from '@tarojs/components';

import { useCallback, useEffect } from 'react';

import { logWithPrefix, string2Number } from '@/utils/common';
import { EmployType } from '@/constants/job';

import './index.less';
import { isFullTimePriceRequired, isPartTimePriceRequired } from '@/utils/job';

export type BlSalaryValue = [number, number, number, number];

interface IProps {
  value: BlSalaryValue;
  employType?: EmployType;
  onChange: (result: BlSalaryValue) => void;
}

const PREFIX = 'bl-salary-input';
const log = logWithPrefix(PREFIX);
const MAX_FULL_PRICE = 1000;
const MAX_PART_PRICE = 2000;

function BlSalaryInput(props: IProps) {
  const { value: initValue = [], onChange, employType } = props;
  const [minFull = '', maxFull = '', minPart = '', maxPart = ''] = initValue;

  const onInput = useCallback(
    (value: number, index: number) => {
      const newValue = [...initValue] as BlSalaryValue;
      newValue.splice(index, 1, value);
      log('onInput', newValue);
      onChange(newValue);
    },
    [initValue, onChange]
  );

  const handleInputMinFull = useCallback(
    (e: BaseEventOrig<InputProps.inputEventDetail>) => {
      const value = e.detail.value || '';
      if (Number.isNaN(Number(value))) {
        return;
      }
      onInput(string2Number(value), 0);
    },
    [onInput]
  );

  const handleInputMaxFull = useCallback(
    (e: BaseEventOrig<InputProps.inputEventDetail>) => {
      const value = e.detail.value || '';
      if (Number.isNaN(Number(value))) {
        return;
      }
      onInput(Math.min(string2Number(value), MAX_FULL_PRICE), 1);
    },
    [onInput]
  );

  const handleInputMinPart = useCallback(
    (e: BaseEventOrig<InputProps.inputEventDetail>) => {
      const value = e.detail.value || '';
      if (Number.isNaN(Number(value))) {
        return;
      }
      onInput(string2Number(value), 2);
    },
    [onInput]
  );

  const handleInputMaxPart = useCallback(
    (e: BaseEventOrig<InputProps.inputEventDetail>) => {
      const value = e.detail.value || '';
      if (Number.isNaN(Number(value))) {
        return;
      }
      onInput(Math.min(string2Number(value), MAX_PART_PRICE), 3);
    },
    [onInput]
  );

  useEffect(() => {
    onChange([minFull, maxFull, minPart, maxPart] as BlSalaryValue);
  }, [minFull, maxFull, minPart, maxPart, onChange]);

  return (
    <div className={PREFIX}>
      {isFullTimePriceRequired(employType) && (
        <div className={`${PREFIX}__item`}>
          <div className={`${PREFIX}__title`}>全职</div>
          <div className={`${PREFIX}__input-container`}>
            <Input
              type="number"
              maxlength={5}
              confirmType="done"
              placeholder="输入最低值"
              value={String(minFull)}
              onInput={handleInputMinFull}
              className={`${PREFIX}__input`}
              placeholderClass={`${PREFIX}__input-placeholder`}
            />
            <div className={`${PREFIX}__unit`}>K/月</div>
          </div>
          <div className={`${PREFIX}__center-divider`}>-</div>
          <div className={`${PREFIX}__input-container`}>
            <Input
              type="number"
              maxlength={5}
              confirmType="done"
              placeholder="输入最高值"
              value={String(maxFull)}
              onInput={handleInputMaxFull}
              className={`${PREFIX}__input`}
              placeholderClass={`${PREFIX}__input-placeholder`}
            />
            <div className={`${PREFIX}__unit`}>K/月</div>
          </div>
        </div>
      )}
      {isPartTimePriceRequired(employType) && (
        <div className={`${PREFIX}__item`}>
          <div className={`${PREFIX}__title`}>兼职</div>
          <div className={`${PREFIX}__input-container`}>
            <Input
              type="number"
              maxlength={5}
              confirmType="done"
              placeholder="输入最低值"
              value={String(minPart)}
              onInput={handleInputMinPart}
              className={`${PREFIX}__input`}
              placeholderClass={`${PREFIX}__input-placeholder`}
            />
            <div className={`${PREFIX}__unit`}>元/小时</div>
          </div>
          <div className={`${PREFIX}__center-divider`}>-</div>
          <div className={`${PREFIX}__input-container`}>
            <Input
              type="number"
              maxlength={5}
              confirmType="done"
              placeholder="输入最高值"
              value={String(maxPart)}
              onInput={handleInputMaxPart}
              className={`${PREFIX}__input`}
              placeholderClass={`${PREFIX}__input-placeholder`}
            />
            <div className={`${PREFIX}__unit`}>元/小时</div>
          </div>
        </div>)}
    </div>
  );
}

export default BlSalaryInput;
