"use client"

import { wrap } from "motion"
import Image from "next/image"
import {
    startTransition,
    useState,
    unstable_ViewTransition as ViewTransition,
    ViewTransitionInstance,
} from "react"

export default function Crossfade() {
    const [index, setIndex] = useState(1)
    const [direction, setDirection] = useState(1)

    const changeImage = (direction: number) => {
        startTransition(() => {
            setIndex(wrap(1, 6, index + direction))
            setDirection(direction)
        })
    }

    function onUpdate(instance: ViewTransitionInstance) {
        const offset = 100 * direction

        instance.old.animate(
            {
                opacity: [1, 0],
                transform: ["none", `translateX(${-offset}px)`],
            },
            { duration: 300, fill: "both", easing: "ease-in" }
        )

        instance.new.animate(
            {
                opacity: [0, 1],
                transform: [`translateX(${offset}px)`, "none"],
            },
            { duration: 400, delay: 200, fill: "both", easing: "ease-out" }
        )
    }

    return (
        <section style={container}>
            <button
                aria-label="Previous"
                style={control}
                onClick={() => changeImage(-1)}
            >
                <Chevron style={{ transform: "rotate(180deg)" }} />
            </button>
            <ViewTransition onUpdate={onUpdate}>
                <div style={imageContainer}>
                    <Image
                        fill
                        style={{
                            objectFit: "contain",
                            objectPosition: "center",
                        }}
                        src={`/photos/japan-day/${index}.jpg`}
                        alt="Photo of Tokyo"
                    />
                </div>
            </ViewTransition>
            <button
                aria-label="Next"
                style={control}
                onClick={() => changeImage(1)}
            >
                <Chevron />
            </button>
        </section>
    )
}

/**
 * Photos by https://citizenofnowhe.re
 */

/**
 * ==============   Icons   ================
 */

function Chevron({ style }: { style?: React.CSSProperties }) {
    return (
        <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            style={style}
        >
            <path
                d="M6 3L11 8L6 13"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
            />
        </svg>
    )
}

/**
 * ==============   Styles   ================
 */

const container: React.CSSProperties = {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    gap: 20,
}

const imageContainer: React.CSSProperties = {
    width: 300,
    height: 300,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    position: "relative",
}

const control: React.CSSProperties = {
    width: 40,
    height: 40,
    backgroundColor: "#f5f5f5",
    borderRadius: 40,
    color: "#0f1115",
    ...container,
}