import styles from '../styles/admin/User.module.css'
import ClassicEditor from 'ckeditor5-custom-build/build/ckeditor'
import { CKEditor } from '@ckeditor/ckeditor5-react'
import Video from './_video.js'
import {useState} from 'react'
import $ from "jquery"

let editorConfig = {
  toolbar: ['fontfamily', 'fontsize', 'fontcolor', 'bold', 'italic',
        'alignment', 'bulletedList', 'indent', 'outdent', 
        'numberedList', 'link', 'blockQuote', 'HtmlEmbed', 
        'codeblock', 'imageinsert', 'mediaembed', 'undo', 'redo' ],
  fontFamily: {
    options: [
        'ឧត្តមាន​ជ័យ, OdorMeanChey', 'អក្សរដៃ, HandWriting',
        'គូលេន, Koulen', 'ក្រូច​ឆ្នារ, Limonf3',
        'បាយ័ន, Bayon', 'ក្រសាំង, Rooster',
        'មូល, Moul',
        'Arial, Helvetica, sans-serif',
        'Courier New, Courier, monospace',
        'Georgia, serif',
        'Lucida Sans Unicode, Lucida Grande, sans-serif',
        'Tahoma, Geneva, sans-serif',
        'Times New Roman, Times, serif',
        'Trebuchet MS, Helvetica, sans-serif',
        'Verdana, Geneva, sans-serif',
    ],
    supportAllValues: true
  },
  
  fontSize: {
    options: [9,11,13,'default',17,19,21],
    supportAllValues: true
  },
}

export default function Ckeditor(ckeditor) {
  
  const [videos, setVideos] = useState([])

  function getExistVideos(){
    const videos = $('.existVideos').val()
    return videos
  }

  return (
    <div className="Ckeditor">
        <form target='/admin/post' method='post'>
            <input type='text' className={styles.title} name='title' 
            placeholder='​​​​​​​​​​​​​​​​​​​​ឈ្មោះអ្នក​ប្រើប្រាស់' required />
            
            <CKEditor
                editor={ ClassicEditor }
                config={ editorConfig }
                onReady={ (editor) => {
                    ckeditor = editor
                } }
                onChange={ ( event, editor ) => {
                    const data = editor.getData()
                } }
                onBlur={ ( event, editor ) => {
                    console.log( 'Blur.', editor )
                } }
                onFocus={ ( event, editor ) => {
                    console.log( 'Focus.', editor )
                } }
            />
              
            <input type='hidden' name='content' />
            <div className={styles.wrapper}>
                <select className={styles.entry} name='category'>
                    <option>​​​​​​​​​​​​​​​​Author</option>
                    <option>Admin</option>
                </select>
                <input className={styles.entry} type='text' name='thumb' 
                placeholder='តំណរ​ភ្ជាប់​រូប​តំណាង'required/>
                <input className={styles.entry} type='datetime-local' 
                name='datetime' required />
                <input className={styles.entry} type='hidden' 
                name='existVideos' />
                <input className={styles.entry} type='submit' value='បញ្ជូន' />
                <input type='text' disabled />
                <input name='email' className={styles.entry} type='email' 
                required  placeholder='Email'/>
                <input name='password' className={styles.entry} type='password' 
                required placeholder='ពាក្យ​សំងាត់'/>
                <input type='text' disabled/>
            </div>
        </form>
        <Video 
            setVideos={setVideos} 
            videos={videos} 
            getExistVideos={getExistVideos} 
        />
    </div>
  )
}

//pages/admin/_video.js
import styles from '../styles/admin/Video.module.css'
import $ from 'jquery'

export default function Video(props){

    function createVideo(){
        const type = $('.type').val()
        const vidid = $('.id').val()
        const ending = $('.ending').val()

        const video = {
            "type":type,
            "id":vidid,
            "ending":ending,
        }  

        const updateVideos = [video,...(props.videos)]
        props.setVideos(updateVideos)
    }

    function removeItem(id){
        const newList = props.videos.filter((item,index) => index !== id)       
        
        props.setVideos(newList);   
    }

    return(
        <>
        <div className={styles.wrapper}>
            <select className={`${styles.entry} type`} name='type'>
                <option>YouTube</option>
                <option>YouTubePlaylist</option>
                <option>Facebook</option>
                <option>OK</option>
                <option>Dailymotion</option>
                <option>Vimeo</option>
            </select>
            <input className={`${styles.entry} id`} name='id' type='text' 
            placeholder="អត្តសញ្ញាណវីដេអូ" required />
            <select className={`${styles.entry} ending`} name='ending'>
                <option>ចប់​</option>
                <option>មិន​ទាន់ចប់</option>
                <option>~ ចប់</option>
            </select>
            <input className={styles.entry} 
            type="button" value="បញ្ចូល​វីដេអូ" onClick={createVideo}/>
        </div>
        <div className={`${styles.videos} videos`}>
            <table className={styles.table}>
            {props.videos.map((item,index,array) => (
                <tr key={index}>
                    <td className={styles.type}>{item.type}</td>
                    <td className={styles.id}>{item.id}</td>
                    <td className={styles.ending}>{item.ending}</td>
                    <td title="លុប" onClick={()=>{removeItem(index)}} className={styles.part}>
                        {`ភាគ `+(array.length-index)}
                    </td>
                </tr>
            ))}
            </table>
        </div>
        </>
    )
}

/* styles/admin/video.module.css */
.wrapper{
    margin-top: 5px;
}

.wrapper,.video{
    display: grid;
    grid-template-columns: 15% auto 30% 10%;
}

.entry,.video div{
    font: var(--body-font);
    padding: 2px 5px;
}

.video{
    background: white;
}

.video div{
    border: 1px solid grey;
}

.table{
    width: 100%;
    border-collapse: collapse;
    background: rgb(232, 240, 254);
}

.table tr:nth-child(even){
    background-color: #f2f2f2;
}

.table td{
    text-align: center;
    border: 1px solid;
    padding: 5px;
}

.type{
    width: 15%;
}

.ending{
    width: 30%;
}

.part{
    width: 10%;
}

.part:hover{
    cursor: pointer;
    opacity: .7;
}

GitHub: https://github.com/Sokhavuth/nblog

Vercel: https://khmerweb-nblog.vercel.app/admin/user