import themes from '../themes'
import { Form, FormValue, ClassDictionary } from '../types'

export const objectToQuerystring = (obj: object) => Object.entries(obj).filter(([_, value]) => value !== undefined).map(([name, value]) => `${name}=${value}`).join('&')

export function setTitle(title: string, decorate: boolean = true) {
    if (decorate) {
        document.title = `${title} / Flexor`
    } else {
        document.title = title
    }
}

export function valueFromForm<T extends FormValue>(form: Form, name: string): T | undefined
export function valueFromForm<T extends FormValue>(form: Form, name: string, defaultValue: T): T
export function valueFromForm<T extends FormValue>(form: Form, name: string, defaultValue?: T): T | undefined
export function valueFromForm<T extends FormValue>(form: Form, name: string, defaultValue?: T): T | undefined {
    const field = form[name]

    if (!field) return defaultValue
    if (field.value === undefined) return defaultValue

    return field.value as T
}

export function getOrigin(url: string) {
    const parser = document.createElement('a')
    parser.href = url
    return parser.origin
}

export const classNames = (dictionary: ClassDictionary) => Object.entries(dictionary).filter(([_, value]) => !!value).map(([key, _]) => key).join(' ')

export const getDefaultThemeName = () => Object.keys(themes)[0]

export const pathJoin = (...paths: string[]) => paths.map(path => path.trim().replace(/(^\/|\/$)/, '')).join('/')