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 { BlFormRadio, BlFormRadioGroup } from '@/components/bl-form-radio';
import { GenderType } 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-basic';
const log = logWithPrefix(PREFIX);

function ProfileBasicFragment(props: IProps, ref) {
  const { profile } = props;
  const [name, setName] = useState(profile.name || '');
  const [gender, setGender] = useState<GenderType>(profile.gender || GenderType.WOMEN);
  const [age, setAge] = useState(profile.age || '');
  const [height, setHeight] = useState(profile.height || '');
  const [weight, setWeight] = useState(profile.weight || '');
  const [shoeSize, setShoeSize] = useState(profile.shoeSize || '');

  const handleInputName = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
    const value = e.detail.value || '';
    setName(value);
  }, []);

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

  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 handleGenderChange = useCallback((value: GenderType) => {
    log('handleGenderChange', value);
    setGender(value);
  }, []);

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

  return (
    <div className={PREFIX}>
      <BlFormItem title="称呼">
        <BlFormInput value={name} onInput={handleInputName} />
      </BlFormItem>
      <BlFormItem title="性别">
        <BlFormRadioGroup direction="horizontal" value={gender} onChange={handleGenderChange}>
          <BlFormRadio name={GenderType.WOMEN} text="女" value={gender} />
          <BlFormRadio name={GenderType.MEN} text="男" value={gender} />
        </BlFormRadioGroup>
      </BlFormItem>
      <BlFormItem title="年龄">
        <BlFormInput value={String(age)} type="number" maxlength={3} onInput={handleInputAge} rightText="岁" />
      </BlFormItem>
      <BlFormItem title="身高">
        <BlFormInput value={String(height)} type="number" maxlength={3} onInput={handleInputHeight} rightText="CM" />
      </BlFormItem>
      <BlFormItem title="体重">
        <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>
    </div>
  );
}

export default forwardRef(ProfileBasicFragment);