import React, { useState } from "react";
import { Link, useHistory } from "react-router-dom";
import Background from "../components/Background";
import useScreenWidth from "../hooks/useScreenWidth";
import images from "../images/images";

const OnBoarding = () => {
    const history = useHistory();
    const screenWidth = useScreenWidth();
    const [currentSlideIndex, setCurrentSlideIndex] = useState<number>(0);
    const [translate, setTranslate] = useState<number>(0);

    const [touchStart, setTouchStart] = useState<number>(0);
    const [touchEnd, setTouchEnd] = useState<number>(0);

    const slideItems = [
        {
            image: images.welcome1,
            title: "Permudah Pemasaran Produk",
            subtitle:
                "SenyuM Mobile membantu Anda memasarkan produk-produk Ultra Mikro BRI, PNM, dan Pegadaian.",
        },
        {
            image: images.welcome2,
            title: "Akses Referral Ultra Mikro",
            subtitle:
                "SenyuM Mobile membantu Anda memberikan akses referral produk keuangan Ultra Mikro kepada masyarakat Ultra Mikro.",
        },
        {
            image: images.welcome3,
            title: "Perluas Nasabah Ultra Mikro",
            subtitle:
                "Manfaatkan referral Ultra Mikro untuk membentuk komunitas nasabah Ultra Mikro di wilayah kerja Anda.",
        },
    ];

    function next() {
        const _index =
            currentSlideIndex < slideItems.length - 1
                ? currentSlideIndex + 1
                : 0;
        setCurrentSlideIndex(_index);
        setTranslate(screenWidth * _index);
    }

    function prev() {
        const _index = currentSlideIndex > 0 ? currentSlideIndex - 1 : 0;
        setCurrentSlideIndex(_index);
        setTranslate(screenWidth * _index);
    }

    function goTo(index: number) {
        setTranslate(screenWidth * index);
        setCurrentSlideIndex(index);
    }

    return (
        <Background>
            <div
                className={`pt-8 px-8 text-right mb-16 ${
                    currentSlideIndex === slideItems.length - 1
                        ? "invisible"
                        : "visible"
                }`}
            >
                <Link
                    to="/create-pin"
                    className="font-sans-medium font-semibold text-base text-white border-b border-white w-initial"
                >
                    Lewati
                </Link>
            </div>

            {screenWidth && (
                <div
                    className="transition-all duration-200 ease-in-out flex flex-wrap"
                    style={{
                        width: screenWidth * slideItems.length,
                        transform: `translateX(-${translate}px)`,
                    }}
                    onTouchStart={(e: React.TouchEvent<HTMLDivElement>) =>
                        setTouchStart(e.targetTouches[0].clientX)
                    }
                    onTouchMove={(e: React.TouchEvent<HTMLDivElement>) =>
                        setTouchEnd(e.targetTouches[0].clientX)
                    }
                    onTouchEnd={(e: React.TouchEvent<HTMLDivElement>) => {
                        // Go to next slide
                        if (
                            touchStart - touchEnd > 150 &&
                            currentSlideIndex < slideItems.length - 1
                        ) {
                            next();
                        }

                        // Go to previous slide
                        else if (
                            touchStart - touchEnd < -150 &&
                            currentSlideIndex > 0
                        ) {
                            prev();
                        }
                    }}
                >
                    {slideItems.map((item, index) => (
                        <div style={{ width: screenWidth }} key={index}>
                            <div className="flex justify-center">
                                <img src={item.image} alt="Welcome" />
                            </div>
                            <div className="mt-16 px-8">
                                <p className="font-sans-bold font-bold text-caption text-center text-white">
                                    {item.title}
                                </p>
                                <p className="font-sans text-paragraph text-center text-white mt-2">
                                    {item.subtitle}
                                </p>
                            </div>
                        </div>
                    ))}
                </div>
            )}

            <div className="absolute bottom-8 w-full">
                <div className="flex justify-center mb-7">
                    {slideItems.map((_, index) => (
                        <button key={index} onClick={() => goTo(index)}>
                            <div
                                className={`bg-white h-2 rounded-sm mr-2 ${
                                    index === currentSlideIndex ? "w-6" : "w-2"
                                } ${
                                    index < slideItems.length - 1
                                        ? "mr-2"
                                        : "mr-0"
                                }`}
                            ></div>
                        </button>
                    ))}
                </div>
                <div className="flex justify-center">
                    <button
                        className="btn btn-md btn-primary"
                        style={{ width: "140px" }}
                        onClick={() => {
                            if (currentSlideIndex >= slideItems.length - 1) {
                                history.push("/create-pin");
                                return;
                            } else {
                                next();
                            }
                        }}
                    >
                        {currentSlideIndex === slideItems.length - 1
                            ? "Mulai Registrasi"
                            : "Selanjutnya"}
                    </button>
                </div>
            </div>
        </Background>
    );
};

export default OnBoarding;