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

import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';

import BlFormInput from '@/components/bl-form-input';
import BlFormItem from '@/components/bl-form-item';
import BlFormSelect from '@/components/bl-form-select';
import { EDUCATION_TYPE_OPTIONS, EducationType } from '@/constants/material';
import { MaterialProfile } from '@/types/material';
import { logWithPrefix, string2Number } from '@/utils/common';

import './index.less';

interface IProps {
  profile: Partial<MaterialProfile>;
}

const PREFIX = 'fragment-profile-others';
const log = logWithPrefix(PREFIX);

function ProfileOthersFragment(props: IProps, ref) {
  const { profile } = props;
  const [educationType, setEducationType] = useState(profile.educationType || '');
  const [height, setHeight] = useState(profile.height || '');
  const [weight, setWeight] = useState(profile.weight || '');
  const [shoeSize, setShoeSize] = useState(profile.shoeSize || '');

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

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

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

  const handleSelectEducationType = useCallback((type: EducationType) => {
    setEducationType(type);
  }, []);

  useImperativeHandle(
    ref,
    () => ({
      getData: () => ({ height, weight, shoeSize, educationType }),
    }),
    [height, weight, shoeSize, educationType]
  );

  return (
    <div className={PREFIX}>
      <div className={`${PREFIX}__title`}>服饰等穿版品类必填，其他品类选填</div>
      <BlFormItem title="身高" optional>
        <BlFormInput value={String(height)} type="number" maxlength={3} onInput={handleInputHeight} rightText="CM" />
      </BlFormItem>
      <BlFormItem title="体重" optional>
        <BlFormInput value={String(weight)} type="number" maxlength={3} onInput={handleInputWeight} rightText="KG" />
      </BlFormItem>
      <BlFormItem title="鞋码" optional>
        <BlFormInput
          value={String(shoeSize)}
          type="number"
          maxlength={2}
          onInput={handleInputShoeSize}
          rightText="码"
        />
      </BlFormItem>
      <BlFormItem title="学历" optional>
        <BlFormSelect
          title="学历"
          value={educationType}
          options={EDUCATION_TYPE_OPTIONS}
          onSelect={handleSelectEducationType}
        />
      </BlFormItem>
    </div>
  );
}

export default forwardRef(ProfileOthersFragment);