import React, { ReactNode } from 'react'
import { usePersonContext } from '../hooks/PersonContext'
import Container from 'react-bootstrap/esm/Container'
import { useAutoFocus } from '../hooks/FocusedElement'
import { Col, Row } from 'react-bootstrap'

export function Contact(props: {icon?: string, text: string}) {
    let textElement: ReactNode = <span className='contact-text'>{props.text}</span>
    if (props.text.match(/^(www|http)/)) {
        let text = props.text
        let url = text
        const urlMatch = text.match(/^https?:\/\/(.+)\/?$/)
        if (urlMatch) {
            text = urlMatch[1]
        } else {
            url = `https://${props.text}`
        }
        textElement = <a href={url} className='contact-link' target='_blank'>{text}</a>
    }
    if (props.text.match(/.+@.+\..+/)) {
        const url = `mailto:${props.text}`
        textElement = <a href={url} className='contact-link' target='_blank'>{props.text}</a>
    }
    return (
        <Col className='contact' xs={'auto'}>
            <i className={'bi-' + props.icon}></i>&nbsp;{textElement}
        </Col>
    )
}

export function Contacts() {
    const person = usePersonContext()
    const focus = useAutoFocus<HTMLDivElement>('contacts')
    return (
        <Container ref={focus} className='contacts' fluid>
            <Row>
                <h2>Contacts</h2>
            </Row>
            <Row>
            {person.contacts.map((contact, index) => (
                <Contact key={index} {...contact} />
            ))}
            </Row>
        </Container>
    )
}