'use client';

import { getHighlighter, setCDN, Highlighter } from 'shiki';
import { useState, useEffect } from 'react';

setCDN('https://unpkg.com/shiki/');

const Editor = () => {
  const [shiki, setShiki] = useState<Highlighter | null>(null);
  const [code, setCode] = useState<string | null>(null);
  const [textAreaValue, setTextAreaValue] = useState<string | null>(null);

  useEffect(() => {
    getHighlighter({
      theme: 'nord',
    }).then((hl: Highlighter) => {
      setShiki(hl);
    });
  }, []);

  useEffect(() => {
    if (shiki) {
      setCode(
        shiki.codeToHtml(
          `import React, { useEffect } from 'react';
const value = new Value();
        
console.log(value);`,
          'js',
        ),
      );
    }
  }, []);

  const handleChange = event => {
    setTextAreaValue(event.target.value);
    setCode(shiki.codeToHtml(event.target.value, 'js'));
  };

  console.log(code);

  return (
    <div className="flex w-full">
      <div className="grid flex-grow card rounded-box place-items-center">
        <textarea
          className="textarea textarea-info"
          placeholder="Input"
          value={textAreaValue}
          onChange={handleChange}
        ></textarea>
      </div>
      <div className="divider divider-horizontal"></div>
      <div className="grid flex-grow card rounded-box place-items-center">
        <div dangerouslySetInnerHTML={{ __html: code }}></div>
      </div>
    </div>
  );
};

export default Editor;