import type { FC } from 'react';
import React, { useContext } from 'react';
import { BRAND_TITLES } from '@theorchard/constants';
import { BsDropdown as Dropdown, Button } from '@theorchard/suite-components';
import { themes, ThemeContext } from '@theorchard/suite-theming';

export const ThemeSwitcher: FC = () => {
    const { theme, setTheme } = useContext(ThemeContext);

    return (
        <Dropdown className="ThemeSwitcher">
            <Dropdown.Toggle as="div">
                <Button className="ThemeSwitcher-btn" variant="secondary" size="sm">
                    {BRAND_TITLES[theme] ?? theme}
                    <div
                        className="bg-primary"
                        style={{
                            height: '13px',
                            width: '13px',
                            borderRadius: '4px',
                            marginLeft: '10px',
                        }}
                    />
                </Button>
            </Dropdown.Toggle>
            <Dropdown.Menu>
                {Object.keys(themes).map((name) => (
                    <Dropdown.Item
                        key={name}
                        active={theme === name}
                        onClick={() => setTheme(name)}
                    >
                        {BRAND_TITLES[name] ?? name}
                    </Dropdown.Item>
                ))}
            </Dropdown.Menu>
        </Dropdown>
    );
};