export const setLanguage = (selectedLanguage: string, i18n: any) => {
    // Locales and languages in arrays to match them
    const locales = ['en-US', 'es-ES', 'nl-NL', 'pt-PT', 'fa-IR', 'he-IL', 'ru-RU', 'ko-KR', 'cs-CZ', 'pl-PL', 'it-IT', 'fr-FR']
    const languages = ['English', 'Español', 'Nederlands', 'Português', 'فارسی', 'עִבְרִית', 'Русский', '한국어', 'Česky', 'Polski', 'Italia', 'Français']

    const locale = locales[languages.indexOf(selectedLanguage)]
    localStorage.setItem("language", locale)
    i18n.locale = locale
}

export function getDefaultSettings() {
    return {
        version: import.meta.env.SAFETWITCH_TAG,
        audioOnly: {
            name: 'audioOnly',
            selected: false,
            type: 'checkbox'
        },
        defaultQuality: {
            name: 'defaultQuality',
            options: ['160p', '360p', '480p', '720p', '1080p'],
            selected: '480p',
            type: 'option'
        },
        language: {
            name: 'language',
            options: ['English', 'Español', 'Nederlands', 'Português', 'فارسی', 'עִבְרִית', 'Русский', '한국어', 'Česky', 'Polski', 'Italia', 'Français'],
            selected: 'English',
            type: 'option'
        },
        chatVisible: {
            name: 'chatVisible',
            selected: false,
            type: 'checkbox'
        },
        streamTagsVisible: {
            name: 'streamTagsVisible',
            selected: true,
            type: 'checkbox'
        },
        streamerAboutSectionVisible: {
            name: 'streamerAboutSectionVisible',
            selected: true,
            type: 'checkbox'
        },
        autoplay: {
            name: 'autoplay',
            selected: false,
            type: 'checkbox'
        }
    }
}

export function syncUserSettings() {
    const defaultSettings = getDefaultSettings()
    const userSettings = localStorage.getItem('settings')
    if (!userSettings) return
    const parsedUserSettings = JSON.parse(userSettings)

    if (parsedUserSettings.version === import.meta.env.SAFETWITCH_TAG) {
        console.log('Settings up to date!')
        return
    } else {
        console.log('Settings outdated... Migrating')
    }


    const synced = { ...defaultSettings, ...parsedUserSettings }
    synced.version = import.meta.env.SAFETWITCH_TAG
    localStorage.setItem('settings', JSON.stringify(synced))
    console.log('Migrated!')
}

export function getSetting(key: string): boolean | string {
    const storage = localStorage.getItem('settings')
    let parsed
    if (!storage) {
        parsed = getDefaultSettings()
    } else {
        parsed = JSON.parse(storage)
    }

    return parsed[key].selected
}

export function chatVisible() {
    const p = getSetting('chatVisible')
    // Flip becuase on the setting page it's
    // displayed as "Hide Chat", but the value
    // is chatVisible
    return !p
}

export const themeList = [
    {
        // name your theme anything that could be a valid css class name
        // remember what you named your theme because you will use it as a class to enable the theme
        name: 'dark',
        // put any overrides your theme has here
        // just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme
        extend: {
            colors: {
                "primary": '#141515',
                "secondary": '#1e1f1f',
                "overlay0": '#282a2a',
                "overlay1": '#323434',
                "surface0": '#393B3B',
                "surface1": '#3F4242',
                "crust": '#0C0C0C',
                "purple": '#D946EF',
                "red": "#980C0C",
                "neutral": "#bdbdbd",
                "contrast": "white",
            }
        }
    },
    {
        // name your theme anything that could be a valid css class name
        // remember what you named your theme because you will use it as a class to enable the theme
        name: 'light',
        // put any overrides your theme has here
        // just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme
        extend: {
            colors: {
                "primary": '#ebeaea',
                "secondary": '#e1e0e0',
                "overlay0": '#d7d5d5',
                "overlay1": '#cdcbcb',
                "surface0": '#c6c4c4',
                "surface1": '#c0bdbd',
                "crust": '#fafafa',
                "purple": '#D946EF',
                "red": "#e81304",
                "neutral": "gray",
                "contrast": "black",
            }
        }
    }
]