<?php

namespace OxygenApp\Views\Frontend\Content;
if (!defined('ABSPATH')) exit;

use OxygenApp\Views\IView;
use OxygenApp\Views\BaseView;
use OxygenApp\Utils\LanguagesHelper;
use OxygenApp\Utils\FrontendData;
use OxygenApp\Enums\FrontendDataType;

class UserPlaylists extends BaseView implements IView
{
    public function render(): void
    {
        $routes = FrontendData::getInstance()->getDefaultSettings(FrontendDataType::ARRAY)['routes'] ?? [];
        $user_playlists_title = LanguagesHelper::getInstance()->getLangLabel('user_playlists_title');
        $new_playlist_btn_label = LanguagesHelper::getInstance()->getLangLabel('new_playlist_btn_label');
        $no_playlist_found = LanguagesHelper::getInstance()->getLangLabel('no_playlist_found');
        $playlist_create_restriction = LanguagesHelper::getInstance()->getLangLabel('playlist_create_restriction');

        ?>
        <div class="absolute inset-0 w-full h-full top-0 left-0 z-10 p-4 white-popup hidden playlists-ui">
            <div class="absolute inset-0 w-full h-full top-0 left-0 z-10 bg-black/20 white-popup pupup-background-ui">
            </div>
            
            <div class="bg-black z-20 bg-opacity-20 backdrop-blur-lg p-5 pt-2 rounded-lg relative shadow-lg left-[0%] md:left-[100px] top-[10%] md:top-[20%] 
                        sm:max-w-[100%] md:max-w-[70%] max-h-[85%] md:max-h-[65%] flex flex-col playlists-ui opacity-0 transition-opacity duration-1000 ease-out popup-content">

                <div>
                    <div class="flex items-center justify-between">
                        <h2 class="text-xl font-semibold text-white"><?php echo esc_html($user_playlists_title) ?></h2>
                        <a href="#" class="text-white text-2xl leading-none close-btn">&times;</a>
                    </div>
                    
                    <a href="#<?php echo esc_attr($routes['new_playlist']['hash'] ?? '') ?>" class="mt-2 bg-black bg-opacity-30 text-gray-300 text-sm rounded-full px-4 py-1 transition duration-200 
                    hover:bg-opacity-60 focus:bg-opacity-30 disabled:bg-opacity-20 disabled:cursor-not-allowed active:bg-opacity-80 
                    inline-flex items-center gap-2 new-playlist-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
                    </svg>
                    <?php echo esc_html($new_playlist_btn_label) ?>
                    </a>
                </div>

                <div class="errors mt-2">
                    <p class="text-white text-sm mb-5 no-playlists">
                        <?php echo esc_html($no_playlist_found) ?>
                    </p>
                    <p class="text-white text-sm mb-5 playlist-create-restriction">
                        <?php echo esc_html($playlist_create_restriction) ?>
                    </p>
                </div>

                <div class="flex-1 overflow-y-auto mt-2 scrollbar-custom">
                    <div class="pb-5 pt-4 content"></div>
                </div>
            </div>

        </div>


        <?php
    }
}