import React, {useEffect, useState} from "react";
import { useNavigate } from "react-router-dom";
import { AuthService, MessageService, CustomerService } from "../../services";
import Select from 'react-select';

const SendMessage = () => {
  const navigate = useNavigate();
  const params = new URLSearchParams(window.location.search);
  useEffect(() => {
    if (!AuthService.canAddOrEditRoutes() && !AuthService.canViewRoutes() && !AuthService.canAccessLegacySystem()) {
      window.alert('You haven\'t login yet OR this user does not have access to this page. Please change a dispatcher or admin account to login.')
      AuthService.logout();
      navigate(`/login`);
    }
    CustomerService.getAllActiveCustomers().then(data => {
      const customers = data.data;
      setSeniorPhoneList(customers.filter(customer => customer.mobile_phone && customer.mobile_phone !== '' ))
    });
    MessageService.getMessages().then(data => setMessageTemplateList(data.data));
  }, []);
  const [contactPhone, setContactPhone] = useState('');
  const [contactSeniorPhone, setContactSeniorPhone] = useState('');
  const [messageTemplate, setMessageTemplate] = useState('');
  const [messageText, setMessageText] = useState('');
  const [seniorPhoneList, setSeniorPhoneList] = useState([]);
  const [messageTempateList, setMessageTemplateList] = useState([]);
  const [showSuccessInfo, setShowSuccessInfo] = useState(false);

  const redirectTo = () => {
    if (params.get('from') === 'medical') {
      navigate(`/medical/`);
    } else {
      navigate(`/admin/customer-report`)
    }
    
  }

  const sendMessage = () => {
    setShowSuccessInfo(false);
    const data = {
      messages: [{
        contactPhone: contactPhone,
        mode: 'AUTO',
        text: messageText
      }]
    };
	  MessageService.sendMessage(data).then(() => setShowSuccessInfo(true));
  }

  const onContactSeniorChange = (selectedData) => {
    setContactSeniorPhone(selectedData);
    setContactPhone(selectedData?.value);
  }

  
  return (
    <>
      <div className="list row mb-4">
        <div className="col-md-12 text-primary">
           <h5>Send Message <button className="btn btn-link btn-sm" onClick={() => {redirectTo()}}>Back</button></h5> 
        </div>
      </div>
      <div className="list row mb-4">
        <div className="col-md-12 mb-4">
          <div>Type in Phone Number:</div> <input type="text" value={contactPhone || ''} onChange={e => setContactPhone(e.target.value)}/>
        </div>
        <div className="col-md-12 mb-4">OR</div>
        <div className="col-md-6 col-sm-12 col-xs-12 mb-4">
          <div>Select From Participant Mobile Number List:</div>
          <Select value={contactSeniorPhone || ''} onChange={selectedData => onContactSeniorChange(selectedData)} options={[{value: '', label: ''}, ...seniorPhoneList.map(senior => ({
            value: senior?.mobile_phone || '',
            label: `${senior?.name}(${senior?.name_cn}) - ${senior?.mobile_phone}` || '',
          }))]}></Select>
        </div>
        <div className="col-md-12 col-sm-12 col-xs-12 mb-4">
          <div>Select Message Template (Not Required):</div>
          <Select value={messageTemplate || ''} onChange={selectedData => {setMessageTemplate(selectedData); setMessageText(selectedData.value)}} options={[{value: '', label: ''}, ...messageTempateList.map(template => ({
            value: template.message_body || '',
            label: template.message_body || '',
          }))]}></Select>
        </div>
		    <div className="col-md-12 mb-4">
          <div>Message Text:</div> <textarea value={messageText || ''} onChange={e => setMessageText(e.target.value)}/>
        </div>
        <div className="col-md-6 col-sm-6 col-xs-12 mb-4">
          <button className="btn btn-primary btn-sm" onClick={() => sendMessage()}> Send Message </button>
          <button className="btn btn-default btn-sm" onClick={() => redirectTo()}> Cancel </button>
        </div>
        
        {showSuccessInfo && <div className="col-md-12 mb-4 alert alert-success" role="alert">
					 Message Sent!
				</div>}
      </div>
    </>
  );
};

export default SendMessage;