import React, { useContext } from "react";
import { ContextLang } from "../ContextLang";
import { ContactValueContainer } from "./contactValueContainer";

type TProps = {
    title: {
        ru: string,
        en: string
    }
    href?: string
    pairData: Array<{
        value1: ContactValueType
        value2?: ContactValueType
    }>
}

type ContactValueType = {
    type: 'a' | 'email' | 'phone' | 'text'
    value: {
        ru: string,
        en: string
    } | string
    href?: string
}

export const ContactContainer:React.FC<TProps> = React.memo((props) => {
    const {lang} = useContext(ContextLang);
    return <div className="contact-container">
        <div className="contact-header">
            <span className="contact-header-title">{props.title[lang]}</span>
            <span className="contact-header-line"></span>            
        </div>
        {
            props.href 
            // ? <a href={`https://${props.href}`} target='_blank' rel="noreferrer noopener" className='contact-href'>{props.href}</a>
            ? <a href={`${props.href}`} target='_blank' rel="noreferrer noopener" className='contact-href'>{props.href}</a>
            : null
        }
        <div className="contact-data-container">
            {props.pairData.map(pair => {
                return <div key={typeof(pair.value1.value) === 'string' ? pair.value1.value : pair.value1.value[lang]} className="contact-data-row">
                    <ContactValueContainer 
                        type={pair.value1.type}
                        value={
                            typeof(pair.value1.value)  === 'string'
                            ? pair.value1.value
                            : pair.value1.value[lang]
                        }
                        href={pair.value1?.href}
                    />                   
                    {/* <div className="contact-data-value-container">
                        <span className="contact-data-value">
                            {
                                typeof(pair.value1) === 'string' 
                                ? pair.value1[0] === '+' 
                                    ? <a href={`tel:${pair.value1}`}>{pair.value1}</a>
                                    : pair.value1
                                : pair.value1[lang][0] === '+'
                                    ? <a href={`tel:${pair.value1[lang]}`}>{pair.value1[lang]}</a>
                                    : pair.value1[lang]
                            }
                        </span>
                    </div> */}
                    {
                        pair.value2?.type
                        ? <ContactValueContainer 
                            type={pair.value2.type}
                            value={
                                typeof(pair.value2.value)  === 'string'
                                ? pair.value2.value
                                : pair.value2.value[lang]
                            }
                            href={pair.value2?.href}
                        />
                        : null
                    }
                    
                    {/* {
                        pair?.value2
                        ? <div className="contact-data-value-container">
                            <span className="contact-data-value">
                            {
                                typeof(pair.value2) === 'string' 
                                ? pair.value2[0] === '+' 
                                    ? <a href={`tel:${pair.value2}`}>{pair.value2}</a>
                                    : pair.value2
                                : pair.value2[lang][0] === '+'
                                    ? <a href={`tel:${pair.value2[lang]}`}>{pair.value2[lang]}</a>
                                    : pair.value2[lang]
                            }
                            </span>    
                        </div>
                        : null
                    }                     */}
                </div>
            })}
        </div>
    </div>
})