import { BaseEventOrig, Button, Textarea, TextareaProps } from '@tarojs/components';
import Taro, { useLoad } from '@tarojs/taro';

import { useCallback, useState } from 'react';

import SafeBottomPadding from '@/components/safe-bottom-padding';
import { EventName } from '@/constants/app';
import { getPageQuery, navigateBack } from '@/utils/route';
import Toast from '@/utils/toast';

import './index.less';

const PREFIX = 'page-job-publish-describe';

const TEMPLATE = `直播品类：
直播时长：
岗位要求：
其他说明：`;

export default function JobPublishDetail() {
  const [info, setInfo] = useState(TEMPLATE);

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

  const handleClickPaste = useCallback(async () => {
    try {
      const { data } = await Taro.getClipboardData();
      data && setInfo(data);
    } catch (e) {
      Toast.error('读取剪切板失败');
    }
  }, []);

  const handleSubmit = useCallback(() => {
    Taro.eventCenter.trigger(EventName.EDIT_JOB_DESCRIBE, info);
    navigateBack();
  }, [info]);

  useLoad(() => {
    const query = getPageQuery<{ describe: string }>();
    if (!query.describe) {
      return;
    }
    setInfo(query.describe);
  });

  return (
    <div className={PREFIX}>
      <div className={`${PREFIX}__tips`}>
        请勿填写微信、电话等联系方式及违反劳动法相关内容，否则有可能导致您的账号被封禁
      </div>
      <div className={`${PREFIX}__title`}>请提供以下信息</div>
      <div className={`${PREFIX}__input-container`}>
        <Textarea
          maxlength={-1}
          value={info}
          confirmType="return"
          onInput={handleInput}
          className={`${PREFIX}__input`}
          placeholder="介绍工作内容、通告要求、加分项"
          placeholderClass={`${PREFIX}__input-placeholder`}
          cursorSpacing={100}
        />
        <Button className={`${PREFIX}__paste-btn`} onClick={handleClickPaste}>
          粘贴
        </Button>
      </div>
      <div className={`${PREFIX}__footer`}>
        <Button className={`${PREFIX}__footer__submit`} onClick={handleSubmit}>
          保存
        </Button>
        <SafeBottomPadding />
      </div>
    </div>
  );
}
