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

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

import BlFormItem from '@/components/bl-form-item';
import { MaterialProfile } from '@/types/material';
import { logWithPrefix } from '@/utils/common';

import './index.less';

interface IProps {
  profile: Partial<MaterialProfile>;
}

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

function ProfileAdvantagesFragment(props: IProps, ref) {
  const { profile } = props;
  const [advantages, setAdvantages] = useState(profile.advantages || '');

  const handleInput = useCallback((e: BaseEventOrig<TextareaProps.onInputEventDetail>) => {
    const value = e.detail.value || '';
    setAdvantages(value);
    log('handleInput', value);
  }, []);

  useImperativeHandle(
    ref,
    () => ({
      getData: () => ({ advantages }),
    }),
    [advantages]
  );

  return (
    <div className={PREFIX}>
      <BlFormItem title="自身优势" optional dynamicHeight>
        <Textarea
          maxlength={-1}
          value={advantages}
          confirmType="done"
          placeholder="比如特长、风格、对直播理解等"
          onInput={handleInput}
          className={`${PREFIX}__input`}
          placeholderClass={`${PREFIX}__input-placeholder`}
        />
      </BlFormItem>
    </div>
  );
}

export default forwardRef(ProfileAdvantagesFragment);
