import { __ } from '@wordpress/i18n'
import { Icon, close } from '@wordpress/icons'
import { Button } from '@wordpress/components'
import { TypeSelect } from '../../components/TypeSelect'
import { useGlobalStore } from '../../state/GlobalState'
import { user } from '../../components/icons/'
import SettingsModal from '../../components/modals/SettingsModal'
import { useUserStore } from '../../state/User'

export const Toolbar = ({ className }) => {
    const setOpen = useGlobalStore((state) => state.setOpen)
    const setCurrentModal = useGlobalStore((state) => state.setCurrentModal)
    const loggedIn = useUserStore((state) => state.apiKey.length)

    return (
        <div className={className}>
            <div className="flex justify-between items-center h-full">
                <div className="flex-1"></div>
                <TypeSelect className="flex-1 flex items-center justify-center" />
                <div className="flex-1 flex justify-end items-center">
                    <Button
                        onClick={() =>
                            setCurrentModal(
                                <SettingsModal
                                    isOpen={true}
                                    onClose={() => setCurrentModal(null)}
                                />,
                            )
                        }
                        icon={<Icon icon={user} size={24} />}
                        label={__('Login and settings area', 'extendify')}>
                        {loggedIn ? '' : __('Log In', 'extendify')}
                    </Button>
                    <Button
                        onClick={() => setOpen(false)}
                        icon={<Icon icon={close} size={24} />}
                        label={__('Close library', 'extendify')}
                    />
                </div>
            </div>
        </div>
    )
}