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

import { useCallback, useEffect, useState } from 'react';

import { IBaseMessageProps } from '@/components/message-chat/base';
import { MessageActionStatus } from '@/constants/message';
import useUserInfo from '@/hooks/use-user-info';
import { getScrollItemId } from '@/utils/common';
import { posConfirmAction, postAddMessageTimes, requestChatActionStatus } from '@/utils/message';

import './index.less';

interface IProps extends IBaseMessageProps {
  onClick: () => void;
}

const PREFIX = 'exchange-message';

function ContactMessage(props: IProps) {
  const { id, message, onClick } = props;
  const { userId } = useUserInfo();
  const [status, setStatus] = useState<MessageActionStatus>();
  const isSender = message.senderUserId === userId;

  const handleClickReject = useCallback(async () => {
    if (isSender || status !== MessageActionStatus.Send) {
      return;
    }
    postAddMessageTimes('click_reject_exchange_contact');
    await posConfirmAction({ actionId: message.actionId, status: false });
    setStatus(MessageActionStatus.Reject);
    onClick();
  }, [isSender, status, message.actionId, onClick]);

  const handleClickAgree = useCallback(async () => {
    if (isSender || status !== MessageActionStatus.Send) {
      return;
    }
    postAddMessageTimes('click_agree_exchange_contact');
    await posConfirmAction({ actionId: message.actionId, status: true });
    setStatus(MessageActionStatus.Agree);
    onClick();
  }, [isSender, status, message.actionId, onClick]);

  useEffect(() => {
    const init = async () => {
      const res = await requestChatActionStatus(message.actionId);
      setStatus(res);
    };
    init();
  }, [message.actionId]);

  return (
    <div className={PREFIX} id={getScrollItemId(id)}>
      <div className={`${PREFIX}__content`}>
        <div className={`${PREFIX}__title`}>
          {isSender ? '您已向对方请求交换联系方式' : `${message.senderName}申请交换联系方式，沟通面试`}
        </div>
        <div className={`${PREFIX}__buttons`}>
          {isSender && (
            <Button className={`${PREFIX}__disable-btn`} onClick={handleClickAgree}>
              {status === MessageActionStatus.Agree
                ? '对方已同意'
                : status === MessageActionStatus.Reject
                  ? '对方已拒绝'
                  : '等待对方同意'}
            </Button>
          )}
          {!isSender && (
            <>
              {(status === MessageActionStatus.Send || !status) && (
                <>
                  <Button className={`${PREFIX}__reject`} onClick={handleClickReject}>
                    拒绝
                  </Button>
                  <Button className={`${PREFIX}__agree`} onClick={handleClickAgree}>
                    同意
                  </Button>
                </>
              )}
              {status === MessageActionStatus.Agree && <Button className={`${PREFIX}__disable-btn`}>你已同意</Button>}
              {status === MessageActionStatus.Reject && <Button className={`${PREFIX}__disable-btn`}>你已拒绝</Button>}
            </>
          )}
        </div>
      </div>
    </div>
  );
}

export default ContactMessage;
