import React, {useEffect, useState} from "react";
import { useNavigate, useParams } from "react-router-dom";
import { AuthService, MessageService } from "../../services";
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";


const MessageTokenEditor = () => {
  const navigate = useNavigate();
  const params = useParams();
	const [messageToken, setMessageToken] = useState('');
  
  const [currentMessageToken, setCurrentMessageToken] =  useState(undefined); 

  useEffect(() => {
    if (!AuthService.canAddOrEditRoutes() && !AuthService.canViewRoutes()) {
      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`);
    }
    if (!currentMessageToken) {
      MessageService.getSendMessageToken().then(data => {
        if (data.data && data.data.length > 0) {
          setCurrentMessageToken(data.data[0]);
        }
      })
    }
  }, []);

  useEffect(() => {
    if (currentMessageToken) {
      setMessageToken(currentMessageToken?.message_token);
    }
    
  }, [currentMessageToken])

  const redirectTo = () => {
		navigate(`/messages/list`);
  }

	const saveMessageToken = () => {
		const data = {
      message_token: messageToken
    };
    if (currentMessageToken) {
      
      MessageService.updateMessageToken(currentMessageToken.id, data).then(() => {
        redirectTo();
      });
    } else {
      MessageService.createMessageToken(data).then(() => {
        redirectTo();
      });
    }
	}

  
  return (
    <>
      <div className="list row mb-4">
        <Breadcrumb>
          <Breadcrumb.Item href="/">General</Breadcrumb.Item>
          <Breadcrumb.Item active>
            Messaging 
          </Breadcrumb.Item>
        </Breadcrumb>
        <div className="col-md-12 text-primary">
           <h4>
             Update Message Token <button className="btn btn-link btn-sm" onClick={() => {redirectTo()}}>Back</button>
           </h4> 
        </div>
      </div>

      <div className="app-main-content-list-container">
				<div className="app-main-content-list-func-container">
					<Tabs defaultActiveKey="messageCreation" id="message-template-tab">
						<Tab eventKey="messageCreation" title="Update Message Template">
              <div className="app-main-content-fields-section">
								<div className="me-4">
									<div className="field-label">Message Token
										<span className="required">*</span>
									</div>
									<input type="text" value={messageToken || ''} onChange={e => setMessageToken(e.target.value)}/>
								</div>
              </div>
              <div className="col-md-12 col-sm-12 col-xs-12">
								<button className="btn btn-default btn-sm float-right" onClick={() => redirectTo()}> Cancel </button>
								<button className="btn btn-primary btn-sm float-right" onClick={() => saveMessageToken()}> Save </button>
								
							</div>
            </Tab>
          </Tabs>
        </div>
      </div>
    </>
  );
};

export default MessageTokenEditor;