import { useRouter } from 'next/router'
import { countryCodes } from '../../models/countryCodes'
import { sanitizeLicensePlate } from '../../helpers/licensePlateHelper'
import { getMessages } from '../../helpers/apiHelper'
import useSWR from 'swr'
import moment from 'moment'

export default () => {
    const router = useRouter()
    const { countryCode, licensePlate } = router.query

    if (!countryCode || !licensePlate)
    {
        return 'Not found'
    }

    // validate country code
    let country = countryCodes.find(c => c.code == countryCode);
    let countryIsValid = country != null;
    let plateIsValid = sanitizeLicensePlate(licensePlate) == licensePlate;

    if (!countryIsValid || !plateIsValid)
    {
        return 'Not found'
    }

    const { data, error } = useSWR(`${countryCode}/${licensePlate}`, getMessages)

    let list = <p>Loading...</p>;
    if (data && Array.isArray(data))
    {
        if (data.length == 0)
        {
            list = <p>No messages yet</p>
        }
        else
        {
            list = <ul>{data.map((message, index) => (<li key={`m${index}`}>
                <div className="card">
                    <div className="avatar">
                        <i className="fa fa-user-secret fa-2x"></i>
                    </div>
                    <div className="content">
                        <p>{message.content}</p>
                        <span><i className="fas fa-mobile-alt"></i> @ {moment.utc(message.created).local().format("YYYY-MM-DD H:mm:ss")}</span>
                    </div>
                </div>
            </li>))}</ul>
        }
    }
    if (error)
    {
        list = <p>Error</p>
    }
  return (
    <div className="horizontal-flex">
        <header>
            <div className="logo vertical with-margin">
                <div>
                    <h1>carmsngr</h1>
                </div>
            </div>
        </header>

        <main>
            <h2><i className={`flag-icon flag-icon-${countryCode}`}></i> {country.plateDisplay(licensePlate)}</h2>
              {list}
            <div>
                <p className="black">To submit a message send an SMS or WhatsApp message in the following format:<br /><strong>{`${countryCode},${licensePlate},{your message}`}</strong><br />(e.g. "{`${countryCode},${licensePlate},Your left brake light is broken`}")<br />to <strong>+1 (334) 367-4637</strong>.<br />Following countries are supported: cz, sk, at, de, pl</p>
            </div>
        </main>

    </div>
  )
}