import React, {useState, useEffect} from "react";
import { PencilSquare } from "react-bootstrap-icons";
import { useNavigate, useParams } from "react-router-dom";
import { AuthService, CustomerService } from "../../services";
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
import { CUSTOMER_JOIN_REASON_TEXT, CUSTOMER_DISCHARGE_REASON_TEXT } from "../../shared";

const ViewCustomer = () => {
  const navigate = useNavigate();

  const urlParams = useParams();
  const [currentCustomer, setCurrentCustomer] =  useState(undefined);
  const [currentAvatar, setCurrentAvatar] = useState(undefined);
	
  const redirectTo = () => {
		navigate(`/customers/list`)
  }

  const goToEdit = (id) => {
    navigate(`/customers/edit/${id}`)
  }

  useEffect(() => {
    if (!AuthService.canViewCustomers()) {
      window.alert('You haven\'t login yet OR this user does not have access to this page. Please change an admin account to login.')
      AuthService.logout();
      navigate(`/login`);
    }
    if (!currentCustomer) {
      CustomerService.getCustomer(urlParams.id).then((data) => {
        setCurrentCustomer(data.data);
      })
    }
  }, []);

  useEffect(() => {
    if (currentCustomer?.id ) {
      CustomerService.getAvatar(currentCustomer?.id).then((data) => {
        setCurrentAvatar(data.data);
      })
    }
  }, [currentCustomer]);
  
  return (
    <>
      <div className="list row mb-4">
        <Breadcrumb>
          <Breadcrumb.Item>General</Breadcrumb.Item>
          <Breadcrumb.Item active>
            Customer Information
          </Breadcrumb.Item>
          <Breadcrumb.Item active>
            View Customer Details
          </Breadcrumb.Item>
        </Breadcrumb>
        <div className="col-md-12 text-primary">
           <h4>View Customer Information <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="basicInfo" id="customers-tab">
            <Tab eventKey="basicInfo" title="Basic Information">
							<h6 className="text-primary">Personal Details</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Name</div> 
                  <div className="field-value">{currentCustomer?.name}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">First Name</div> 
                  <div className="field-value">{currentCustomer?.firstname}</div>
                </div>
                {/* <div><div className="field-label">Middle Name</div> <input type="text" value={middlename || ''} onChange={e => setMiddlename(e.target.value)}/></div> */}
                <div className="field-body">
                  <div className="field-label">Last Name</div>
                  <div className="field-value">{currentCustomer?.lastname}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Preferred Name/Chinese Name</div>
                  <div className="field-value">{currentCustomer?.name_cn}</div>
                </div>
              </div>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Admission Date</div>
                  <div className="field-value">{currentCustomer?.admission_date}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Discharge Date</div>
                  <div className="field-value">{currentCustomer?.discharge_date}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Birth Date</div>
                  <div className="field-value">{currentCustomer?.birth_date}</div>
                </div>
              </div>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Customer Type</div>
                  <div className="field-value">{currentCustomer?.type}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Gender</div>
                  <div className="field-value">{currentCustomer?.gender}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Language Spoken</div>
                  <div className="field-value">{currentCustomer?.language}</div>
                </div>
              </div>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Height</div> 
                  <div className="field-value">{currentCustomer?.height}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Weight</div>
                  <div className="field-value">{currentCustomer?.weight}</div>
                </div>
              </div>
              
              <h6 className="text-primary">Contact Information</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Primary Phone Number</div>
                  <div className="field-value">{currentCustomer?.phone}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Secondary Phone Number</div>
                  <div className="field-value">{currentCustomer?.home_phone}</div>
                </div>
                {/* <div className="field-body">
                  <div className="field-label">Other Phone Number</div>
                  <input type="text" value={mobilePhone || ''} onChange={e => setMobilePhone(e.target.value)}/>
                </div> */}
                <div className="field-body">
                  <div className="field-label">Personal Email</div>
                  <div className="field-value">{currentCustomer?.email}</div>
                </div>
              </div>
              {/* We will do Address and Emergency later */}
              <h6 className="text-primary">Home Addresses</h6>
              {[1, 2, 3, 4, 5].map((index) => {
                const streetAddress = index === 1 ? currentCustomer?.street_address_1 : 
                                    index === 2 ? currentCustomer?.street_address_2 : 
                                    index === 3 ? currentCustomer?.street_address_3 : 
                                    index === 4 ? currentCustomer?.street_address_4 : 
                                    currentCustomer?.street_address_5;
                const city = index === 1 ? currentCustomer?.city1 : 
                           index === 2 ? currentCustomer?.city2 : 
                           index === 3 ? currentCustomer?.city3 : 
                           index === 4 ? currentCustomer?.city4 : 
                           currentCustomer?.city5;
                const state = index === 1 ? currentCustomer?.state1 : 
                            index === 2 ? currentCustomer?.state2 : 
                            index === 3 ? currentCustomer?.state3 : 
                            index === 4 ? currentCustomer?.state4 : 
                            currentCustomer?.state5;
                const zipCode = index === 1 ? currentCustomer?.zip_code1 : 
                              index === 2 ? currentCustomer?.zip_code2 : 
                              index === 3 ? currentCustomer?.zip_code3 : 
                              index === 4 ? currentCustomer?.zip_code4 : 
                              currentCustomer?.zip_code5;
                const address = index === 1 ? currentCustomer?.address1 : 
                              index === 2 ? currentCustomer?.address2 : 
                              index === 3 ? currentCustomer?.address3 : 
                              index === 4 ? currentCustomer?.address4 : 
                              currentCustomer?.address5;
                
                // Show address if any of the new fields or old address field has data
                if (streetAddress || city || state || zipCode || address) {
                  return (
                    <>
                      <h6 className="text-secondary mb-3">Address {index}</h6>
                      <div key={index} className="app-main-content-fields-section">
                      
                      {streetAddress && (
                        <div className="field-body">
                          <div className="field-label">Street Address</div>
                          <div className="field-value">{streetAddress}</div>
                        </div>
                      )}
                      {city && (
                        <div className="field-body">
                          <div className="field-label">City</div>
                          <div className="field-value">{city}</div>
                        </div>
                      )}
                      {state && (
                        <div className="field-body">
                          <div className="field-label">State</div>
                          <div className="field-value">{state}</div>
                        </div>
                      )}
                      {zipCode && (
                        <div className="field-body">
                          <div className="field-label">Zip Code</div>
                          <div className="field-value">{zipCode}</div>
                        </div>
                      )}
                      {address && !streetAddress && !city && !state && !zipCode && (
                        <div className="field-body">
                          <div className="field-label">Address</div>
                          <div className="field-value">{address}</div>
                        </div>
                      )}
                    </div>
                    </>
                    
                  );
                }
                return null;
              })}
              
              <h6 className="text-primary">Emergency Contact Information</h6>
              {[1, 2].map((index) => {
                const name = index === 1 ? currentCustomer?.emergency_contact_name : currentCustomer?.emergency_contact2_name;
                const phone = index === 1 ? currentCustomer?.emergency_contact_phone : currentCustomer?.emergency_contact2_phone;
                const relationship = index === 1 ? currentCustomer?.emergency_contact_relationship : currentCustomer?.emergency_contact2_relationship;
                const emergencyContact = index === 1 ? currentCustomer?.emergency_contact : currentCustomer?.emergency_contact2;
                
                // Show emergency contact if any of the new fields or old emergency contact field has data
                if (name || phone || relationship || emergencyContact) {
                  return (
                    <>
                      <h6 className="text-secondary mb-3">
                        {index === 1 ? 'Primary Emergency Contact' : 'Emergency Contact 2'}
                      </h6>
                      <div key={index} className="app-main-content-fields-section">
                     
                        {name && (
                          <div className="field-body">
                            <div className="field-label">Name</div>
                            <div className="field-value">{name}</div>
                          </div>
                        )}
                        {phone && (
                          <div className="field-body">
                            <div className="field-label">Phone</div>
                            <div className="field-value">{phone}</div>
                          </div>
                        )}
                        {relationship && (
                          <div className="field-body">
                            <div className="field-label">Relationship</div>
                            <div className="field-value">{relationship}</div>
                          </div>
                        )}
                        {emergencyContact && !name && !phone && !relationship && (
                          <div className="field-body">
                            <div className="field-label">Emergency Contact</div>
                            <div className="field-value">{emergencyContact}</div>
                          </div>
                        )}
                      </div>
                    </>
                    
                  );
                }
                return null;
              })}
              <h6 className="text-primary">Service Information</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Text Message Enabled</div>
                  <div className="field-value">{currentCustomer?.text_msg_enabled ? 'Yes': 'No'}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Table Id</div>
                  <div className="field-value">{currentCustomer?.table_id}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Seating</div>
                  <div className="field-value">{currentCustomer?.seating}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Pickup Status</div>
                  <div className="field-value">{currentCustomer?.pickup_status}</div>
                </div>
              </div>
              <h6 className="text-primary">General Health Information</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Eyes-on</div>
                  <div className="field-value">{currentCustomer?.disability ? 'Yes' : 'No'}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Special Needs</div>
                  <div className="field-value">{currentCustomer?.special_needs}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Health Condition</div>
                  <div className="field-value">{currentCustomer?.health_condition}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Allergy Information</div>
                  <div className="field-value">{currentCustomer?.allergy_info}</div>
                </div>
              </div>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Service Requirements</div>
                  <div className="field-value">{currentCustomer?.service_requirement}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Payment Due Date</div>
                  <div className="field-value">{currentCustomer?.payment_due_date}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Payment Status</div>
                  <div className="field-value">{currentCustomer?.payment_status}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Join Reason</div>
                  <div className="field-value">{currentCustomer?.join_reason ? CUSTOMER_JOIN_REASON_TEXT[currentCustomer.join_reason] : ''}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Discharge Reason</div>
                  <div className="field-value">{currentCustomer?.discharge_reason ? CUSTOMER_DISCHARGE_REASON_TEXT[currentCustomer.discharge_reason] : ''}</div>
                </div>
              </div>
              <h6 className="text-primary">Additional Information</h6>
              <div className="app-main-content-fields-section base-line">
                <div className="field-body">
                  <div className="field-label">Profile Picture</div>
                  {currentAvatar && <img height="100px" width="100px" src={`data:image/png;base64, ${currentAvatar}`}/>}
                </div>
                <div className="field-body">
                  <div className="field-label">Note</div>
                  <div className="field-value">{currentCustomer?.note || currentCustomer?.private_note}</div>
                </div>
              </div>
						</Tab>
						<Tab eventKey="healthCareInfo" title="Health Care Information">
              <h6 className="text-primary">Personal Details</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Primary Care Provider</div>
                  <div className="field-value">{currentCustomer?.care_provider}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Medicare Number</div>
                  <div className="field-value">{currentCustomer?.medicare_number}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Medicaid Number</div>
                  <div className="field-value">{currentCustomer?.medicaid_number}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Pharmacy</div>
                  <div className="field-value">{currentCustomer?.pharmacy}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Pharmacy ID</div>
                  <div className="field-value">{currentCustomer?.pharmacy_id}</div>
                </div>
              </div>
						</Tab>
          </Tabs>
          <div className="list-func-panel">
						<button className="btn btn-primary" onClick={() => goToEdit(currentCustomer?.id)}><PencilSquare className="me-2" size={16}></PencilSquare>Edit</button>
					</div>
        </div>
      </div>
      {/*<div className="list row mb-4">
        <div className="col-md-12 mb-4">
					{currentAvatar && <img height="100px" width="100px" src={`data:image/png;base64, ${currentAvatar}`}/>}
        </div>
        <div className="col-md-4 mb-4">
			  	<div>Emergency Contact:{currentCustomer?.emergency_contact}</div> 
        </div>
        <div className="col-md-4 mb-4">
          <div>Mobile Phone: {currentCustomer?.mobile_phone}</div> 
        </div>
        <div className="col-md-4 mb-4">
          <div>Username: {currentCustomer?.username}</div>
        </div>
        <div className="col-md-4 mb-4">
          <div>Address 1: {currentCustomer?.address1}</div>
        </div>
        <div className="col-md-4 mb-4">
          <div>Address 2: {currentCustomer?.address2}</div>
        </div>
        <div className="col-md-4 mb-4">
          <div>Address 3: {currentCustomer?.address3}</div>
        </div>
        <div className="col-md-4 mb-4">
          <div>Address 4: {currentCustomer?.address4}</div>
        </div>
        <div className="col-md-4 mb-4">
          <div>Address 5: {currentCustomer?.address5}</div>
        </div>
        <div className="col-md-4 mb-4">
          <div>Apartment: {currentCustomer?.apartment}</div>
        </div>
        <div className="col-md-4 mb-4">
					<div>Pin:{currentCustomer?.pin}</div>
        </div>
        <div className="col-md-4 mb-4">
					<div>Vehicle No: {currentCustomer?.vehicle_no}</div>
        </div>
        <div className="col-md-4 mb-4">
					<div>Caller:{currentCustomer?.caller}</div>
        </div>
        <div className="col-md-4 mb-4">
					<div>Placement:{currentCustomer?.placement}</div>
        </div>
        <div className="col-md-4 mb-4">
					<div>Groups:{currentCustomer?.groups?.join(', ')}</div>
        </div>
        <div className="col-md-4 mb-4">
					<div>Tags:{currentCustomer?.tags?.join(', ')}</div>
        </div>
        <div className="col-md-4 mb-4">
					<div>Roles:{currentCustomer?.roles?.join(', ')}</div>
        </div>
      </div> */}
    </>
  );
};

export default ViewCustomer;