import { Image } from '@tarojs/components';

import { useCallback, useState } from 'react';

import { PageUrl } from '@/constants/app';
import { getPartnerBannerClose, setPartnerBannerClose } from '@/utils/partner';
import { navigateTo } from '@/utils/route';
import './index.less';

const PREFIX = 'invite-operations-fragment-banner';

export default function InviteOperationsBanner() {
  const [bannerClose, setBannerClose] = useState<boolean>(getPartnerBannerClose());

  const handlePartnerBannerClose = useCallback(e => {
    e.preventDefault();
    e.stopPropagation();
    setBannerClose(true);
    setPartnerBannerClose();
  }, []);

  const handleClick = useCallback(async () => {
    navigateTo(PageUrl.InviteOperations);
  }, []);

  if (bannerClose) {
    return null;
  }

  return (
    <div className={PREFIX} onClick={handleClick}>
      <Image
        className={`${PREFIX}__image`}
        src="https://publiccdn.neighbourhood.com.cn/img/invite-operations-banner.png"
        mode="scaleToFill"
      />
      <div className={`${PREFIX}__close`} onClick={handlePartnerBannerClose} />
    </div>
  );
}