'use client'

import { Cookies, Platforms, XVideosOrientations, PornHubOrientations, YouPornOrientations, RedTubeOrientations } from '@/meta/settings';

import css from './Orientation.module.scss'

import React from 'react';

import { setCookie } from '@/utils/cookies/write';
import { useCookies } from 'react-cookie';

interface Props {
    handleClose(): void
    labels: {
        title: string,
    }
}

const getOrientations = (platform: Platforms):Object => {
    if ([Platforms.xnxx, Platforms.xvideos].includes(platform)) {
        return XVideosOrientations
    }
    
    if([Platforms.youporn].includes(platform)) {
        return YouPornOrientations
    }

    if([Platforms.redtube].includes(platform)) {
        return RedTubeOrientations
    }

    return PornHubOrientations
} 

const Orientation: React.FC<Props> = (props) => {

    const { labels, handleClose } = props
    
    const [cookies] = useCookies([Cookies.orientation, Cookies.platform]);

    const orientationsList = cookies.platform ? getOrientations(cookies.platform ) : XVideosOrientations

    const handleChange = async (event: React.ChangeEvent<HTMLSelectElement>) => {
        const value = event.target.value;

        await setCookie(Cookies.orientation, value)

        handleClose()
    }

    return (
        <div className={css.container}>
            <div className={css.title}>{labels.title}</div>
            <select defaultValue={ cookies.orientation ?? XVideosOrientations.etero } onChange={handleChange} name={'orientation'} aria-label={labels.title}>
                {Object.keys(orientationsList).map((elem, key) => {
                    return <option className={css.option} key={key} value={elem}>{elem.toUpperCase()}</option>
                })}
            </select>
        </div>
    );
};

export default Orientation;