import React from 'react';
import ListRow from "../../../UI/DuaList/ListRow";
import TextColumn from "../../../UI/DuaList/Columns/TextColumn";
import EmptyList from "../../../UI/DuaList/EmptyList";
import {handleCopyContent, stripHtmlTags} from "../../../../helpers/functions";
import {FILTERED_CATALOGUE_ENTRY} from "../../../../models/Contacts/Contacts";
import parse from 'html-react-parser';
import './contacts-list.scss';
import DuaList from "../../../UI/DuaList/DuaList";


type ContactsListProps = {
    entries: FILTERED_CATALOGUE_ENTRY[],
    catalogueLength?: number
}
const ContactsList = ({entries, catalogueLength}: ContactsListProps) => {

    return (
        <>
            {
                catalogueLength && catalogueLength > 0 ?

                    <DuaList>

                            {
                                entries?.map((entry, i) => {
                                    return (
                                            <ListRow
                                                key={entry.id}
                                                status={'pending'}
                                            >

                                                    <TextColumn
                                                        label={
                                                            "Ονοματεπώνυμο"
                                                      }
                                                        textWrap
                                                        flex='1 1 300px'
                                                        size={'14px'}
                                                        align={'left'}
                                                        title={`Κάντε click για αντιγραφή`}
                                                    >

                                                        <span
                                                            style={{position: 'relative', cursor: 'pointer'}}
                                                            onClick={() =>
                                                                handleCopyContent(stripHtmlTags(entry.full_name))
                                                            }>
                                                            {parse(entry.full_name)}
                                                        </span>
                                                    </TextColumn>
                                                    <TextColumn
                                                        label={
                                                            "Email"
                                                      }
                                                        flex='1 1 280px'
                                                        size={'14px'}
                                                        title={`Κάντε click για αποστολή Email`}
                                                        align={'left'}
                                                    >
                                                        {entry.email === ' ' ? (
                                                            <></>
                                                        ) : (
                                                            <a href={`mailto:${stripHtmlTags(entry.email)}`}
                                                               style={{color: '$title-color'}}>
                                                                {parse(entry.email)}
                                                            </a>
                                                        )}
                                                    </TextColumn>

                                                    <TextColumn
                                                        label={
                                                            "Τηλέφωνο"
                                                      }
                                                        flex="1 1 200px"
                                                        size={'16px'}
                                                        align="left"
                                                        title={`Κάντε click για αντιγραφή`}
                                                    >

                                                        <>
                                                            {entry.phone.split(',').map((phoneNumber: string, index: number, array: string[]) => (
                                                                <span
                                                                    key={index}
                                                                    style={{position: 'relative', cursor: 'pointer'}}
                                                                    onClick={
                                                                        () => {
                                                                            handleCopyContent(stripHtmlTags(phoneNumber).trim())
                                                                        }
                                                                    }
                                                                >

                                                                    {' '}{parse(phoneNumber)}{index < array.length - 1 && ','}

                                                                    </span>
                                                            ))}
                                                        </>


                                                    </TextColumn>
                                                    <TextColumn
                                                        label={
                                                           "Κτίριο"
                                                      }
                                                        title={'Κτίριο:' + entry.building}
                                                        flex={'1 1 100px'}
                                                        align={'left'}>
                                                        {
                                                            <span>Κτίριο {entry.building}</span>
                                                        }
                                                    </TextColumn>

                                                    <TextColumn
                                                        label={
                                                            "webpage"
                                                      }
                                                        title={entry.webpage}
                                                        size='12px'
                                                        flex={'1 1 200px'}
                                                        align={'left'}
                                                    >
                                                        {

                                                            //PREPEND HTTPS TO LINK IF IT DOESN'T EXIST
                                                            <a rel="noreferrer" style={{color: '$title-color'}}
                                                               href={!(stripHtmlTags(entry.webpage).startsWith('https://') || stripHtmlTags(entry.webpage).startsWith('http://')) ? 'https://' +stripHtmlTags(entry.webpage) : stripHtmlTags(entry.webpage)}
                                                               target='_blank'>{parse(entry.webpage)}</a>
                                                        }
                                                    </TextColumn>

                                                    <TextColumn
                                                        label={
                                                            "TeamsID"
                                                       }
                                                        size='12px'
                                                        title={`TeamsID`}
                                                        flex={'1 1 150px'}
                                                        align={'left'}>
                                                        {
                                                                parse(entry.skype)

                                                        }
                                                    </TextColumn>
                                            </ListRow>
                                    );
                                })
                            }
                    </DuaList>
                    :
                    <EmptyList>
                        Αναζητήστε στον κατάλογο
                    </EmptyList>
            }
        </>
    );
}
export default ContactsList;