'use client'
import * as React from 'react';
import TwoRowDepart from './TwoRowDepart';
import $ from 'jquery';
import io from 'socket.io-client';

export default function DepartsPage() {

    const [trains, setTrains] = React.useState([]);

    React.useEffect(() => {
        async function listen() {
            await fetch('/api/trains/listen', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
            });
        }
        listen();

        const socket = io({
            path: '/api/socket',
        });

        socket.on('db-update', (data) => {
            setTrains((trains) => [...trains, data]);
            console.log(data);
        });

        return () => {
            socket.disconnect();
        };
    }, []);

    const clock = () => {
        var date = new Date();
        date.setHours(date.getHours() + (date.getTimezoneOffset() / -60));

        var h = date.getUTCHours();
        if (h < 10) {
            h = '0' + h;
        }
        $('#clock-hours').html(h);
        var m = date.getUTCMinutes();
        if (m < 10) {
            m = '0' + m;
        }
        $('#clock-minutes').html(m);
        var s = date.getUTCSeconds();
        if (s < 10) {
            s = '0' + s;
        }
        $('#clock-seconds').html(s);
        setInterval(clock, '1000');
        return true;
    }

    const scollX = () => {
        $('.text-scroll-x').each(function () {

            var distance = $(this).width() + $(this).parent().width() + 10;


            if ($(this).width() > $(this).parent().width()) {
                $(this).addClass('animation-scroll-x');
                $(this).css({
                    '-webkit-animation-duration': (distance / 150) + 's',
                    'animation-duration': (distance / 150) + 's',
                    'padding-left': '100%'
                });
            } else {
                $(this).css({
                    'padding-left': '0%'
                });
            }
        });
    }

    const scrollY = (limit) => {
        var elem = $('.scroll-y');
        var elemHeight = elem.height();
        var parentHeight = elem.parent().height();
        var elemHeightRelative = elemHeight / parentHeight * 100;

        if (elemHeightRelative > limit && limit < 100) {
            var distance = (elemHeight - (parentHeight / 1.1)) / $(window).height() * 100;
            var time = distance / 6 + 10;
            var delay = 5 / time * 100;

            $("<style type='text/css'> @keyframes scrollY{ 0%, " + delay + "%{ transform:translateY(0%); } " + (100 - delay) + "%, 100%{ transform:translateY(-" + distance + "vh); } } </style>").appendTo("head");
            $(elem).css({
                'animation': 'scrollY ' + time + 's linear infinite 0s'
            });
        } else {
            $(elem).css({
                'animation': 'none'
            });
        }
    }

    React.useEffect(() => {
        clock();
    }, []);

    return (
        <>
            <TwoRowDepart number={1234} timing={'à l\'heure'} gare={'Test'} type={'TER'} departure={'12h00'} />
        </>
    );
}