/**
 * title: 基本用法
 * desc: 渲染大量数据
 */

import React from 'react';
import useVirtualList from "../../useVirtualList";

function Demo2(): JSX.Element {
    const [value, onChange] = React.useState(0);
    const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
        Array.from(Array(99999).keys()),
        {
            itemHeight: i => (i % 2 === 0 ? 42 + 8 : 84 + 8),
            overscan: 10,
        },
    );
    return (
        <div>
            <div
                style={{
                    textAlign: 'right',
                    marginBottom: 16,
                }}
            >
                <input
                    style={{
                        width: 120,
                    }}
                    placeholder="line number"
                    type="number"
                    value={value}
                    onChange={e => onChange(Number(e.target.value))}
                />
                <button
                    style={{
                        marginLeft: 8,
                    }}
                    type="button"
                    onClick={() => {
                        scrollTo(Number(value));
                    }}
                >
                    scroll to
        </button>
            </div>
            <div
                {...containerProps}
                style={{
                    height: '300px',
                    overflow: 'auto',
                }}
            >
                <div {...wrapperProps}>
                    {list.map(ele => (
                        <div
                            style={{
                                height: ele.index % 2 === 0 ? 42 : 84,
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                                border: '1px solid #e8e8e8',
                                marginBottom: 8,
                            }}
                            key={ele.index}
                        >
                            Row: {ele.data} size: {ele.index % 2 === 0 ? 'small' : 'large'}
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}

export default () => {
    const { list, containerProps, wrapperProps } = useVirtualList(Array.from(Array(999).keys()), {
        overscan: 30,
        itemHeight: 60,
    });
    return (
        <>
            <div {...containerProps} style={{ height: '300px', overflow: 'auto' }}>
                <div {...wrapperProps}>
                    {list.map((ele) => (
                        <div
                            style={{
                                height: 52,
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                                border: '1px solid #e8e8e8',
                                marginBottom: 8,
                            }}
                            key={ele.index}
                        >
                            Row: {ele.data}
                        </div>
                    ))}
                </div>
            </div>
            <h2>demo2</h2>
            <Demo2 />
        </>
    );
};