"use client"

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

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

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

    return (
        <section style={container}>
            <button
                aria-label="Previous"
                style={control}
                onClick={() => changeImage(-1)}
            >
                <Chevron style={{ transform: "rotate(180deg)" }} />
            </button>
            <ViewTransition name="photo">
                <div style={imageContainer}>
                    <Image
                        fill
                        style={{
                            objectFit: "contain",
                            objectPosition: "center",
                        }}
                        src={`/photos/cityscape/${index}.jpg`}
                        alt="Photo of a cityscape"
                    />
                </div>
            </ViewTransition>
            <button
                aria-label="Next"
                style={control}
                onClick={() => changeImage(1)}
            >
                <Chevron />
            </button>
            <style>{`
                ::view-transition-group(photo),
                ::view-transition-new(photo),
                ::view-transition-old(photo) {
                    animation-duration: 1s;
                    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                }
            `}</style>
        </section>
    )
}

/**
 * ==============   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,
}