import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import SubPageHeader from '../components/SubPageHeader';
import {
  getCustomerServicePhone,
  loadCustomerServicePhone,
  openWecomCustomerService,
} from '../lib/customer-service';
import { track } from '../lib/analytics';

export default function CustomerServicePage() {
  const navigate = useNavigate();
  const [phone, setPhone] = useState(getCustomerServicePhone);

  useEffect(() => {
    void loadCustomerServicePhone().then(setPhone);
  }, []);

  const tel = phone.replace(/-/g, '');

  function openOnline() {
    track('cs_contact', { type: 'wecom_kf' });
    openWecomCustomerService();
  }

  return (
    <div className="customer-service-page customer-service-page--oa">
      <SubPageHeader title="在线客服" onBack={() => navigate(-1)} />

      <div className="customer-service-oa-body">
        <p className="customer-service-wecom-title">杜康好客客服</p>
        <p className="customer-service-wecom-hint">点击下方按钮，在微信内进入在线客服会话</p>

        <button type="button" className="customer-service-wecom-btn" onClick={openOnline}>
          <span className="material-symbols-outlined">headset_mic</span>
          联系在线客服
        </button>

        <a className="customer-service-phone-link" href={`tel:${tel}`}>
          <span className="material-symbols-outlined">call</span>
          或拨打客服电话 {phone}
        </a>
      </div>
    </div>
  );
}