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 BlFormSelect from '@/components/bl-form-select';
import { WORK_YEAR_OPTIONS, WorkedYears } 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-experience';
const log = logWithPrefix(PREFIX);
// const STYLE_VALUES = Object.values(StyleType).filter(v => typeof v === 'number');

// const calcInitStyle = (styleString: string = '') => {
//   const styles = styleString.split('、');
//   return styles.filter(v => STYLE_VALUES.includes(Number(v))).map(v => Number(v));
// };

// const getStyleString = (styles: StyleType[]) => {
//   return styles.join('、');
// };

const calcInitMaxGmv = (maxGmv: number) => {
  if (!maxGmv) {
    return '';
  }
  return maxGmv / 10000;
};

const getMaxGmv = (maxGmv: number) => {
  if (Number.isNaN(maxGmv)) {
    return 0;
  }
  return maxGmv * 10000;
};

function ProfileExperienceFragment(props: IProps, ref) {
  const { profile } = props;
  const [workedYear, setWorkedYear] = useState(profile.workedYear);
  const [workedAccounts, setWorkedAccounts] = useState(profile.workedAccounts || '');
  const [newAccountExperience, setNewAccountExperience] = useState(profile.newAccountExperience);
  const [workedSecCategoryStr, setWorkedSecCategoryStr] = useState(profile.workedSecCategoryStr || '');
  // const [style, setStyle] = useState(calcInitStyle(profile.style));
  const [maxGmv, setMaxGmv] = useState(calcInitMaxGmv(profile?.maxGmv || 0));
  const [maxOnline, setMaxOnline] = useState(profile.maxOnline || '');

  const handleSelectWorkYear = useCallback((newYear: WorkedYears) => {
    setWorkedYear(newYear);
  }, []);

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

  const handleNewAccountExperienceChange = useCallback((value: number) => {
    log('handleNewAccountExperienceChange', value);
    setNewAccountExperience(value);
  }, []);

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

  // const handleStyleChange = useCallback((value: StyleType[]) => {
  //   log('handleStyleChange', value);
  //   setStyle(value);
  // }, []);

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

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

  useImperativeHandle(
    ref,
    () => ({
      getData: () => ({
        workedYear,
        workedAccounts,
        newAccountExperience,
        workedSecCategoryStr,
        // style: getStyleString(style.sort()),
        maxOnline: maxOnline === '' ? undefined : maxOnline,
        maxGmv: maxGmv === '' ? undefined : getMaxGmv(Number(maxGmv)),
      }),
    }),
    [workedYear, workedAccounts, newAccountExperience, workedSecCategoryStr, maxGmv, maxOnline]
  );

  return (
    <div className={PREFIX}>
      <BlFormItem title="直播经验">
        <BlFormSelect title="直播经验" value={workedYear} options={WORK_YEAR_OPTIONS} onSelect={handleSelectWorkYear} />
      </BlFormItem>
      <BlFormItem title="直播过的品类" optional>
        <BlFormInput value={workedSecCategoryStr} maxlength={140} onInput={handleInputWorkedSecCategoryStr} />
      </BlFormItem>
      <BlFormItem title="自然流起号经验" optional>
        <BlFormRadioGroup
          direction="horizontal"
          value={newAccountExperience}
          onChange={handleNewAccountExperienceChange}
        >
          <BlFormRadio name={false} text="无" value={newAccountExperience} />
          <BlFormRadio name text="有" value={newAccountExperience} />
        </BlFormRadioGroup>
      </BlFormItem>
      <BlFormItem title="直播过的账号" optional>
        <BlFormInput value={workedAccounts} maxlength={140} onInput={handleInputWorkedAccounts} />
      </BlFormItem>
      {/* <ProfileEditItem title="直播风格" optional>
        <ProfileCheckboxGroup value={style} onChange={handleStyleChange}>
          <ProfileCheckbox value={style} name={StyleType.Broadcasting} text="平播" />
          <ProfileCheckbox value={style} name={StyleType.HoldOrder} text="憋单" />
          <ProfileCheckbox value={style} name={StyleType.Passion} text="激情" />
        </ProfileCheckboxGroup>
      </ProfileEditItem> */}
      <BlFormItem title="最高GMV" optional>
        <BlFormInput value={String(maxGmv)} type="number" maxlength={10} onInput={handleInputMaxGmv} rightText="W" />
      </BlFormItem>
      <BlFormItem title="最高在线人数" optional>
        <BlFormInput value={String(maxOnline)} type="number" onInput={handleInputMaxOnline} rightText="人" />
      </BlFormItem>
    </div>
  );
}

export default forwardRef(ProfileExperienceFragment);