---
import Layout from "../layouts/Layout.astro";
import ImageUpload from "../components/ImageUpload.vue";
---

<Layout title="Add News | Barta India">
    <main>
        <div>
            <section class="container mx-auto px-4 md:max-w-3xl mt-40 space-y-4 shadow-xl rounded-xl p-4">
                <h1 class="text-center text-2xl underline decoration-4 decoration-[#580a0a]">Genarate New News</h1>
                <form id="newsPara" class="flex flex-col space-y-4" enctype="multipart/form-data">
                    <!-- <label for="language">Language<span class="text-[#580a0a] font-bold">*</span></label>
                    <select required onchange="qryWithLang();" name="language" id="language" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl p-2">
                        <option value="0">-Select-</option>
                        <option value="english">English</option>    
                        <option value="bengali">Bengali</option>
                    </select> -->
                    <div class="flex flex-col">
                        <label for="category">Category<span class="text-[#580a0a] font-bold">*</span></label>
                        <select name="category" id="category" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl p-2">
                            <option value="0">-Select-</option>
                            <option value="national">National</option>
                            <option value="politics">Politics</option>
                            <option value="local">Local</option>
                            <option value="technology">Technology</option>
                            <option value="world">World</option>
                        </select>
                    </div>
                    <div class="flex flex-col ">
                        <label for="preText">News Paragraph</label>
                        <textarea required name="preText" id="preText" cols="30" maxlength="1000000" rows="10" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl">white tiger</textarea>
                    </div>
                    <div class="flex flex-col">
                        <textarea required name="systemMessage" id="systemMessage" cols="30" rows="3" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl">provide meta_title within 60 characters, meta_description within  160 characters, short_description within 280 characters, heading within 170 characters in en, bn, hi, zh, es ar all in a json structure no use comma after line ending</textarea>
                    </div>
                    <div>
                        <button id="genButton" onclick="submitNewsPara(event);" class="bg-[#580a0a] text-white px-4 py-2 rounded-lg" >Genarate</button>
                    </div>
                    <!-- <input id="message" type="text" value="" class="border-2 border-[#580a0a] p-2 focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"/> -->
                </form>
            </section>
        </div>
    </main>
</Layout>

<script is:inline>
    function qryWithLang(){
        let langValue = document.getElementById('language').value;
        document.getElementById('systemMessage').value = `provide meta_title within 60 characters, meta_description within  160 characters, short_description within 280 characters, heading within 170 characters in en, bn, hi, zh,  es,  pt, ru, fr, ur, ar all in a json structure no use comma after line ending`;
        // give me long description below 2000 characters, title, heading not more than 160 characters, short desciption not more than 280 characters, meta_title not more than 60 characters and try to use common words, meta_description not more than 160 characters and try to use common words, all text are convert to ${langValue} language, give me all in a json structure`
        // provide   meta_title within 60 characters, meta_description within  160 characters, short_description within 280 characters in English, bengali and hindi all in a json structure
        // need title, heading not more than 160 characters, meta_title not more than 60 characters, meta_description not more than 160 characters, short_description not more than 280 characters, long_description below 2000 characters, all are ${langValue} language all in a json structure
        // provide meta_title within 60 characters, meta_description within  160 characters, short_description within 280 characters in English, bengali and hindi all in a json structure
        // provide meta_title within 60 characters, meta_description within  160 characters, short_description within 280 characters in English, bengali, hindi, Mandarin,  Spanish,  Portuguese, Russian, French, all in a json structure
    }

    function submitNewsPara(event) {
        event.preventDefault();
        let genButton = document.getElementById('genButton');
        let langInput = document.getElementById('language');
        let loadSection = document.getElementById('loadingSection');
        let newsData = document.getElementById('newsPara');
        let formData = new FormData(newsData);
        fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/multi-lang/`, {
            method: 'POST',
            body: formData,
        })
        .then(data => data.json())
        .then(data => {
            // if (data === 200) {
            //     counter++;
            // } else {
                // formSection genButton brightness-50
                console.log(data)
            // }
            let newsData = data.choices[0].message.content;
            let jsonObject = JSON.parse(newsData);
            // Sample array

            // Using forEach to log each element
            // jsonObject.forEach(function(arrayData) {
            //     console.log('Array Data', arrayData);
            // });

            // console.log(jsonObject.en)
            // console.log(jsonObject.bn)
            
            // document.getElementById('title').value = jsonObject.title;
            // document.getElementById('slug').value = jsonObject.title;
            // document.getElementById('heading').value = jsonObject.heading;
            // document.getElementById('meta_title').value = jsonObject.meta_title;
            // document.getElementById('meta_description').value = jsonObject.meta_description;
            // document.getElementById('in_brief').value = jsonObject.short_description;
            // document.getElementById('content').value = jsonObject.long_description;
        })  
        .catch(error => {
            console.error('Error occurred', error);
        });
    }
    function slugify(text) {
        return text.toString().toLowerCase()
            .replace(/\s+/g, '-')        // Replace spaces with -
            .replace(/[^\w-]+/g, '')     // Remove all non-word characters
            .replace(/--+/g, '-')        // Replace multiple - with single -
            .replace(/^-+/, '')          // Trim - from start of text
            .replace(/-+$/, '');         // Trim - from end of text
    }

    function updateSlug() {
        const titleInput = document.getElementById('slug');
        const slugInput = document.getElementById('slug');
        const titleValue = titleInput.value;
        slugInput.value = slugify(titleValue);
    }

    function callApi(event) {
        event.preventDefault();
        let slugValue = document.getElementById('slug').value;
        let newsData = document.getElementById('newsForm');
        let formData = new FormData(newsData);
        fetch(`https://apisp.dev2.cicdhosting.com/news/add-news/?action=save`, {
            method: 'POST',
            body: formData,
        })
        .then(data => data.json())
        .then(data => {
            if (data.success === true) {
                window.location.href= `/add-file?slug=${slugValue}`
                // console.log(slugValue)
                console.log('Form Data Submitted Successfully');
            } else {
                console.log('Data Submit Failed');
            }
            console.log(data);
        })
        .catch(error => {
            console.error('Error occurred', error);
        });
    }
</script>
<style>
    #loadingSection{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .load-aimate{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border-left: 5px solid #580a0a;
        border-right: 5px solid #580a0a;
        border-bottom: 5px solid #580a0a;
        border-top: 5px solid #FFFFFF;
        background-color: #FFFFFF;
    }
</style>