import React, { useCallback, useState } from 'react';
import styled from 'styled-components';
import { ArrowLeft, ArrowRight } from 'react-bootstrap-icons';
import { useEffect } from 'react';

const Button = styled.button`
    background-color: rgb(62, 68, 87, 0.6);
    border-radius: 12px;
    border: none;
    color: #ffffff;
    height: 50px;
    position: absolute;
    top: calc(50% - 50px / 2);
    width: 50px;

    &:hover {
        background-color: rgb(62, 68, 87, 1);
    }

    &:active,
    &:focus {
        outline: none;
    }
`;
const Wrapper = styled.div`
    display: flex;
    align-items: center;
    position: relative;

    ${Button} {
        display: none;
    }

    &:hover ${Button} {
        display: block;
    }
`;
const ButtonNext = styled(Button)`
    right: 10px;
`;
const ButtonPrev = styled(Button)`
    left: 10px;
`;

function ThumbnailSelector({
    images,
    onChange,
}: {
    images: string[];
    onChange: (image: string) => void;
}) {
    const [page, setPage] = useState(0);
    const onClickNext = useCallback(() => {
        setPage(page + 1);
    }, [page, setPage]);
    const onClickPrev = useCallback(() => {
        setPage(page - 1);
    }, [page, setPage]);

    useEffect(() => {
        onChange(images[page]);
    }, [images, page]);

    return (
        <Wrapper>
            <img alt="thumbnail" src={images[page]} />
            {page > 0 && (
                <ButtonPrev onClick={onClickPrev}>
                    <ArrowLeft />
                </ButtonPrev>
            )}
            {page < images.length - 1 && (
                <ButtonNext onClick={onClickNext}>
                    <ArrowRight />
                </ButtonNext>
            )}
        </Wrapper>
    );
}

export default ThumbnailSelector;