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/contract_participants/contract_participantsSlice'
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 Contract_participantsView = () => {
    const router = useRouter()
    const dispatch = useAppDispatch()
    const { contract_participants } = useAppSelector((state) => state.contract_participants)
    
    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 contract_participants')}</title>
          </Head>
          <SectionMain>
            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View contract_participants')} main>
                <BaseButton
                  color='info'
                  label='Edit'
                  href={`/contract_participants/contract_participants-edit/?id=${id}`}
                />
            </SectionTitleLineWithButton>
            <CardBox>
            

              

              

              

              

              

              

              

              

              

              
              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Contractfolder</p>
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                        <p>{contract_participants?.contract_folder?.title ?? 'No data'}</p>
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                </div>
                 
              

              

              

              
              

              

              

              

              

              

              

              

              

              

              
              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>User(optional)</p>
                    
                    
                        <p>{contract_participants?.user?.firstName ?? 'No data'}</p>
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                </div>
                 
              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Displayname</p>
                    <p>{contract_participants?.display_name}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Email</p>
                    <p>{contract_participants?.email}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Phone(E.164)</p>
                    <p>{contract_participants?.phone_e164}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Participantrole</p>
                    <p>{contract_participants?.participant_role ?? 'No data'}</p>
                </div>
              

              

              

              

              

              
              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Partyside</p>
                    <p>{contract_participants?.party_side ?? 'No data'}</p>
                </div>
              

              

              

              

              

              
              

              

              

              

              

              

              

              

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Status</p>
                    <p>{contract_participants?.status ?? 'No data'}</p>
                </div>
              

              

              

              

              

              
              

              

              

              

              

              

              

              

              

              
                <FormField label='Caneditbeforeanysignature'>
                    <SwitchField
                      field={{name: 'can_edit_before_any_signature', value: contract_participants?.can_edit_before_any_signature}}
                      form={{setFieldValue: () => null}}
                      disabled
                    />
                </FormField>
              

              

              

              

              
              

              

              

              

              

              

              

              

              

              

              
              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>organizations</p>
                    
                    
                    
                    
                    
                    
                    
                    
                        <p>{contract_participants?.organizations?.name ?? 'No data'}</p>
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                </div>
                 
              

              

              

              
              

                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Participant_invitations Contractparticipant</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Invitetoken</th>
                                
                                
                                
                                <th>Sentat</th>
                                
                                
                                
                                <th>Viewedat</th>
                                
                                
                                
                                <th>Acceptedat</th>
                                
                                
                                
                                <th>Expiresat</th>
                                
                                
                                
                                <th>Sendcount</th>
                                
                                
                                
                                <th>Channel</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {contract_participants.participant_invitations_contract_participant && Array.isArray(contract_participants.participant_invitations_contract_participant) &&
                              contract_participants.participant_invitations_contract_participant.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/participant_invitations/participant_invitations-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="invite_token">
                                        { item.invite_token }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sent_at">
                                        { dataFormatter.dateTimeFormatter(item.sent_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="viewed_at">
                                        { dataFormatter.dateTimeFormatter(item.viewed_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="accepted_at">
                                        { dataFormatter.dateTimeFormatter(item.accepted_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="expires_at">
                                        { dataFormatter.dateTimeFormatter(item.expires_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="send_count">
                                        { item.send_count }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="channel">
                                        { item.channel }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!contract_participants?.participant_invitations_contract_participant?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Payment_shares Payerparticipant</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Amountdue</th>
                                
                                
                                
                                <th>Amountpaid</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Paylinktoken</th>
                                
                                
                                
                                <th>Paylinkexpiresat</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {contract_participants.payment_shares_contract_participant && Array.isArray(contract_participants.payment_shares_contract_participant) &&
                              contract_participants.payment_shares_contract_participant.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/payment_shares/payment_shares-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="amount_due">
                                        { item.amount_due }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount_paid">
                                        { item.amount_paid }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="pay_link_token">
                                        { item.pay_link_token }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="pay_link_expires_at">
                                        { dataFormatter.dateTimeFormatter(item.pay_link_expires_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!contract_participants?.payment_shares_contract_participant?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Authentication_sessions Contractparticipant</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Startedat</th>
                                
                                
                                
                                <th>Completedat</th>
                                
                                
                                
                                <th>Attemptcount</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {contract_participants.authentication_sessions_contract_participant && Array.isArray(contract_participants.authentication_sessions_contract_participant) &&
                              contract_participants.authentication_sessions_contract_participant.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/authentication_sessions/authentication_sessions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="started_at">
                                        { dataFormatter.dateTimeFormatter(item.started_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="completed_at">
                                        { dataFormatter.dateTimeFormatter(item.completed_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="attempt_count">
                                        { item.attempt_count }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!contract_participants?.authentication_sessions_contract_participant?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Notification_records Participant</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Approvedat</th>
                                
                                
                                
                                <th>Recordhash</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {contract_participants.notification_records_contract_participant && Array.isArray(contract_participants.notification_records_contract_participant) &&
                              contract_participants.notification_records_contract_participant.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/notification_records/notification_records-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="approved_at">
                                        { dataFormatter.dateTimeFormatter(item.approved_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="record_hash">
                                        { item.record_hash }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!contract_participants?.notification_records_contract_participant?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Signing_actions Participant</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>Revisionnumber</th>
                                
                                
                                
                                <th>Actiontype</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Actionat</th>
                                
                                
                                
                                <th>Signaturehash</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {contract_participants.signing_actions_contract_participant && Array.isArray(contract_participants.signing_actions_contract_participant) &&
                              contract_participants.signing_actions_contract_participant.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/signing_actions/signing_actions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="revision_number">
                                        { item.revision_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="action_type">
                                        { item.action_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="action_at">
                                        { dataFormatter.dateTimeFormatter(item.action_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="signature_hash">
                                        { item.signature_hash }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!contract_participants?.signing_actions_contract_participant?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Document_revisions Proposedby</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Revisionnumber</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                
                                
                                <th>Proposedat</th>
                                
                                
                                
                                <th>Changesummary</th>
                                
                                
                                
                                
                                
                                <th>Contenthash</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {contract_participants.document_revisions_proposed_by_participant && Array.isArray(contract_participants.document_revisions_proposed_by_participant) &&
                              contract_participants.document_revisions_proposed_by_participant.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/document_revisions/document_revisions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="revision_number">
                                        { item.revision_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="proposed_at">
                                        { dataFormatter.dateTimeFormatter(item.proposed_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="change_summary">
                                        { item.change_summary }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="content_hash">
                                        { item.content_hash }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!contract_participants?.document_revisions_proposed_by_participant?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Revision_approvals Participant</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Decision</th>
                                
                                
                                
                                <th>Decidedat</th>
                                
                                
                                
                                <th>Comment</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {contract_participants.revision_approvals_contract_participant && Array.isArray(contract_participants.revision_approvals_contract_participant) &&
                              contract_participants.revision_approvals_contract_participant.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/revision_approvals/revision_approvals-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="decision">
                                        { item.decision }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="decided_at">
                                        { dataFormatter.dateTimeFormatter(item.decided_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="comment">
                                        { item.comment }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!contract_participants?.revision_approvals_contract_participant?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Revocation_requests Requestedby</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Requestedat</th>
                                
                                
                                
                                <th>Processedat</th>
                                
                                
                                
                                <th>Reason</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {contract_participants.revocation_requests_requested_by_participant && Array.isArray(contract_participants.revocation_requests_requested_by_participant) &&
                              contract_participants.revocation_requests_requested_by_participant.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/revocation_requests/revocation_requests-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="requested_at">
                                        { dataFormatter.dateTimeFormatter(item.requested_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="processed_at">
                                        { dataFormatter.dateTimeFormatter(item.processed_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reason">
                                        { item.reason }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!contract_participants?.revocation_requests_requested_by_participant?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                
                
                
                

                <BaseDivider />

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

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

export default Contract_participantsView;