import { h } from "preact"
import { useState } from "preact/hooks"
import { ReorderableList } from "@/comps/echo/reorderable"
 
export const ReorderableListBaseDemo = () => {
    const [data, setData] = useState([
        { position: 3, mass: 6.941, id: 'Li', name: 'Lithium' },
        { position: 11, mass: 22.990, id: 'Na', name: 'Sodium' },
        { position: 17, mass: 35.453, id: 'Cl', name: 'Chlorine' },
        { position: 26, mass: 55.845, id: 'Fe', name: 'Iron' },
        { position: 82, mass: 207.2, id: 'Pb', name: 'Lead' },
    ])
 
    return <ReorderableList
        class="w-[300px]"
        items={data}
        onChange={setData}
        rowHeight={60}
        renderItem={(row) => (
            <div class="flex-row items-center h-full w-full bg-white px-2 rounded m-[1px] ml-[2px] border-gray-400 border-[1px]">
                <div class="h-full w-[50px] justify-center items-center bold text-2xl">{row.id}</div>
                <div class="ml-4">
                    <div class="h-full w-full justify-center bold mb-1">{row.name}</div>
                    <div class="h-full w-full justify-center text-[10px] text-gray-500">
                        {`Position: ${row.position}, Mass: ${row.mass}`}
                    </div>
                </div>
            </div>
        )}
    />
}

import { h } from "preact"
import { useState } from "preact/hooks"
import { ReorderableList } from "@/comps/echo/reorderable"
 
export const ReorderableListHandleDemo = () => {
    const [data, setData] = useState([
        { position: 3, mass: 6.941, id: 'Li', name: 'Lithium' },
        { position: 11, mass: 22.990, id: 'Na', name: 'Sodium' },
        { position: 17, mass: 35.453, id: 'Cl', name: 'Chlorine' },
        { position: 26, mass: 55.845, id: 'Fe', name: 'Iron' },
        { position: 82, mass: 207.2, id: 'Pb', name: 'Lead' },
    ])
 
    return <ReorderableList
        class="w-[340px]"
        items={data}
        onChange={setData}
        rowHeight={60}
        handle={() => <div class="w-[30px] h-full justify-center items-center bg-white rounded m-[1px] bold border-gray-400 border-[1px]">⋮⋮</div>}
        renderItem={(row) => (
            <div class="flex-row items-center h-full w-full bg-white px-2 rounded m-[1px] ml-[2px] border-gray-400 border-[1px]">
                <div class="h-full w-[50px] justify-center items-center bold text-2xl">{row.id}</div>
                <div class="ml-4">
                    <div class="h-full w-full justify-center bold mb-1">{row.name}</div>
                    <div class="h-full w-full justify-center text-[10px] text-gray-500">
                        {`Position: ${row.position}, Mass: ${row.mass}`}
                    </div>
                </div>
            </div>
        )}
    />
}

import { h } from "preact"
import { useState } from "preact/hooks"
import { ScrollableReorderableList } from "@/comps/echo/reorderable"
 
export const ReorderableListScrollableDemo = () => {
    const [data, setData] = useState([
        { position: 3, mass: 6.941, id: 'Li', name: 'Lithium' },
        { position: 11, mass: 22.990, id: 'Na', name: 'Sodium' },
        { position: 17, mass: 35.453, id: 'Cl', name: 'Chlorine' },
        { position: 26, mass: 55.845, id: 'Fe', name: 'Iron' },
        { position: 82, mass: 207.2, id: 'Pb', name: 'Lead' },
        { position: 6, mass: 12.011, id: 'C', name: 'Carbon' },
        { position: 7, mass: 14.007, id: 'N', name: 'Nitrogen' },
        { position: 39, mass: 88.906, id: 'Y', name: 'Yttrium' },
        { position: 56, mass: 137.33, id: 'Ba', name: 'Barium' },
        { position: 58, mass: 140.12, id: 'Ce', name: 'Cerium' },
    ])
 
    return <ScrollableReorderableList
        class="w-full"
        scrollViewClass="w-[360px] h-[300px]"
        items={data}
        onChange={setData}
        rowHeight={60}
        handle={() => <div class="w-[30px] h-full justify-center items-center bg-white rounded m-[1px] bold border-gray-400 border-[1px]">⋮⋮</div>}
        renderItem={(row) => (
            <div class="flex-row items-center h-full bg-white px-2 rounded m-[1px] ml-[2px] border-gray-400 border-[1px] grow shrink">
                <div class="h-full w-[50px] justify-center items-center bold text-2xl">{row.id}</div>
                <div class="ml-4">
                    <div class="h-full w-full justify-center bold mb-1">{row.name}</div>
                    <div class="h-full w-full justify-center text-[10px] text-gray-500">
                        {`Position: ${row.position}, Mass: ${row.mass}`}
                    </div>
                </div>
            </div>
        )}
    />
}