import React, { ReactElement, useEffect } from 'react';
import Head from 'next/head'
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import dayjs from "dayjs";
import {useAppDispatch, useAppSelector} from "../../stores/hooks";
import {useRouter} from "next/router";
import { fetch } from '../../stores/locations/locationsSlice'
import {saveFile} from "../../helpers/fileSaver";
import dataFormatter from '../../helpers/dataFormatter';
import ImageField from "../../components/ImageField";
import LayoutAuthenticated from "../../layouts/Authenticated";
import {getPageTitle} from "../../config";
import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
import SectionMain from "../../components/SectionMain";
import CardBox from "../../components/CardBox";
import BaseButton from "../../components/BaseButton";
import BaseDivider from "../../components/BaseDivider";
import {mdiChartTimelineVariant} from "@mdi/js";
import {SwitchField} from "../../components/SwitchField";
import FormField from "../../components/FormField";

import {hasPermission} from "../../helpers/userPermissions";


const LocationsView = () => {
    const router = useRouter()
    const dispatch = useAppDispatch()
    const { locations } = useAppSelector((state) => state.locations)
    
    const { currentUser } = useAppSelector((state) => state.auth);
    

    const { id } = router.query;
    
    function removeLastCharacter(str) {
      console.log(str,`str`)
      return str.slice(0, -1);
    }

    useEffect(() => {
        dispatch(fetch({ id }));
    }, [dispatch, id]);


    return (
      <>
          <Head>
              <title>{getPageTitle('View locations')}</title>
          </Head>
          <SectionMain>
            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View locations')} main>
                <BaseButton
                  color='info'
                  label='Edit'
                  href={`/locations/locations-edit/?id=${id}`}
                />
            </SectionTitleLineWithButton>
            <CardBox>
            

              

              

              

              

              

              

              

              

              

              
                {hasPermission(currentUser, 'READ_ORGANIZATIONS') && 
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Organization</p>
                    
                    
                    
                    
                    
                    
                    
                    
                        <p>{locations?.organization?.name ?? 'No data'}</p>
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                </div>
                  } 
              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Name</p>
                    <p>{locations?.name}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Market</p>
                    <p>{locations?.market}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Timezone</p>
                    <p>{locations?.timezone}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>AddressLine1</p>
                    <p>{locations?.address_line_1}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>City</p>
                    <p>{locations?.city}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>State</p>
                    <p>{locations?.state}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>PostalCode</p>
                    <p>{locations?.postal_code}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              

              

              

              

              

              

              

              

              
                <FormField label='Active'>
                    <SwitchField
                      field={{name: 'active', value: locations?.active}}
                      form={{setFieldValue: () => null}}
                      disabled
                    />
                </FormField>
              

              

              

              

              
              

                
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Role_assignments Location</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>RoleName</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                                
                                <th>ScopeNotes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {locations.role_assignments_location && Array.isArray(locations.role_assignments_location) &&
                              locations.role_assignments_location.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/role_assignments/role_assignments-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="role_name">
                                        { item.role_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="active">
                                        { dataFormatter.booleanFormatter(item.active) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="scope_notes">
                                        { item.scope_notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!locations?.role_assignments_location?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Authorization_cases Location</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>Stage</th>
                                
                                
                                
                                <th>Urgency</th>
                                
                                
                                
                                <th>OrderingProviderName</th>
                                
                                
                                
                                <th>RenderingProviderName</th>
                                
                                
                                
                                <th>SiteOfService</th>
                                
                                
                                
                                <th>ScheduledDate</th>
                                
                                
                                
                                <th>DollarsAtRisk</th>
                                
                                
                                
                                
                                
                                <th>DueAt</th>
                                
                                
                                
                                <th>SLAState</th>
                                
                                
                                
                                <th>InternalNotes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {locations.authorization_cases_location && Array.isArray(locations.authorization_cases_location) &&
                              locations.authorization_cases_location.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/authorization_cases/authorization_cases-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="stage">
                                        { item.stage }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="urgency">
                                        { item.urgency }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ordering_provider_name">
                                        { item.ordering_provider_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="rendering_provider_name">
                                        { item.rendering_provider_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="site_of_service">
                                        { item.site_of_service }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="scheduled_date">
                                        { dataFormatter.dateTimeFormatter(item.scheduled_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="dollars_at_risk">
                                        { item.dollars_at_risk }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="due_at">
                                        { dataFormatter.dateTimeFormatter(item.due_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sla_state">
                                        { item.sla_state }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="internal_notes">
                                        { item.internal_notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!locations?.authorization_cases_location?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Tasks Location</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>TaskType</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Priority</th>
                                
                                
                                
                                
                                
                                <th>DueAt</th>
                                
                                
                                
                                <th>CompletedAt</th>
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                <th>Description</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {locations.tasks_location && Array.isArray(locations.tasks_location) &&
                              locations.tasks_location.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/tasks/tasks-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="task_type">
                                        { item.task_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="priority">
                                        { item.priority }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="due_at">
                                        { dataFormatter.dateTimeFormatter(item.due_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="completed_at">
                                        { dataFormatter.dateTimeFormatter(item.completed_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="description">
                                        { item.description }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!locations?.tasks_location?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Denials Location</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>DenialAt</th>
                                
                                
                                
                                <th>DenialType</th>
                                
                                
                                
                                <th>DenialReasonText</th>
                                
                                
                                
                                <th>DenialCode</th>
                                
                                
                                
                                <th>DollarsDenied</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {locations.denials_location && Array.isArray(locations.denials_location) &&
                              locations.denials_location.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/denials/denials-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="denial_at">
                                        { dataFormatter.dateTimeFormatter(item.denial_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="denial_type">
                                        { item.denial_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="denial_reason_text">
                                        { item.denial_reason_text }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="denial_code">
                                        { item.denial_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="dollars_denied">
                                        { item.dollars_denied }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!locations?.denials_location?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Appeals Location</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>AppealLevel</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>DueAt</th>
                                
                                
                                
                                <th>SubmittedAt</th>
                                
                                
                                
                                <th>DecisionAt</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>ReviewedAt</th>
                                
                                
                                
                                
                                
                                <th>ExportArtifactKey</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {locations.appeals_location && Array.isArray(locations.appeals_location) &&
                              locations.appeals_location.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/appeals/appeals-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="appeal_level">
                                        { item.appeal_level }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="due_at">
                                        { dataFormatter.dateTimeFormatter(item.due_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="submitted_at">
                                        { dataFormatter.dateTimeFormatter(item.submitted_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="decision_at">
                                        { dataFormatter.dateTimeFormatter(item.decision_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="reviewed_at">
                                        { dataFormatter.dateTimeFormatter(item.reviewed_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="export_artifact_key">
                                        { item.export_artifact_key }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!locations?.appeals_location?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Audit_logs Location</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>ActionType</th>
                                
                                
                                
                                <th>EntityName</th>
                                
                                
                                
                                <th>EntityKey</th>
                                
                                
                                
                                <th>ChangesJSON</th>
                                
                                
                                
                                <th>IPAddress</th>
                                
                                
                                
                                <th>UserAgent</th>
                                
                                
                                
                                <th>OccurredAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {locations.audit_logs_location && Array.isArray(locations.audit_logs_location) &&
                              locations.audit_logs_location.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/audit_logs/audit_logs-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="action_type">
                                        { item.action_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="entity_name">
                                        { item.entity_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="entity_key">
                                        { item.entity_key }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="changes_json">
                                        { item.changes_json }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ip_address">
                                        { item.ip_address }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="user_agent">
                                        { item.user_agent }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="occurred_at">
                                        { dataFormatter.dateTimeFormatter(item.occurred_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!locations?.audit_logs_location?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Contacts Location</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>ContactType</th>
                                
                                
                                
                                <th>Name</th>
                                
                                
                                
                                <th>RoleTitle</th>
                                
                                
                                
                                <th>Phone</th>
                                
                                
                                
                                <th>Email</th>
                                
                                
                                
                                <th>Fax</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {locations.contacts_location && Array.isArray(locations.contacts_location) &&
                              locations.contacts_location.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/contacts/contacts-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="contact_type">
                                        { item.contact_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="role_title">
                                        { item.role_title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phone">
                                        { item.phone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="email">
                                        { item.email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="fax">
                                        { item.fax }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="active">
                                        { dataFormatter.booleanFormatter(item.active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!locations?.contacts_location?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                

                <BaseDivider />

                <BaseButton
                    color='info'
                    label='Back'
                    onClick={() => router.push('/locations/locations-list')}
                />
              </CardBox>
          </SectionMain>
      </>
    );
};

LocationsView.getLayout = function getLayout(page: ReactElement) {
    return (
      <LayoutAuthenticated
        
        permission={'READ_LOCATIONS'}
        
      >
          {page}
      </LayoutAuthenticated>
    )
}

export default LocationsView;