import React from 'react';
import { useState } from 'react';

import { Button } from './Button';
import { Popover } from 'react-tiny-popover';

import '../styles/popover.css';

export const DropDown = ({ title, options, onSelect }) => {

    const[open, setOpen] = useState(false)

    const[selected, setSelected] = useState(null)

    const [isPopoverOpen, setIsPopoverOpen] = useState(false)

    return (
            <Popover
                isOpen={isPopoverOpen}
                onClickOutside={() => { setIsPopoverOpen(false) }}
                padding={10}
                align="start"
                positions={['bottom', 'top', 'right']} // preferred positions by priority
                content={
                    <div style={{ width: 200 }} className="popover">
                        <label style={{marginBottom: 8}}>{title}</label>
                        {options.map(option => {
                            return (                                
                                <Button appearance="minimal" onClick={() => {setSelected(option)} } isActive={selected == option} isFullWidth={true} align="start" style={{ marginBottom: '0.7em' }}>{option}</Button>
                            )
                        })}
                    </div>
                }
                >
                <div>
                    <Button appearance="secondary" isActive={open} onClick={() => { setIsPopoverOpen(!isPopoverOpen) }}>{selected || 'Select'}</Button>
                </div>
            </Popover>
    );
}

// {selected == option && <Check />}