import { useEffect } from 'react'
import { useIdeContext } from 'src/helpers/hooks/useIdeContext'

const IdeConsole = () => {
  const { state } = useIdeContext()
  useEffect(() => {
    const element = document.querySelector('.console-tile .mosaic-window-body')
    if (element) {
      element.scrollTop = element.scrollHeight - element.clientHeight
    }
  }, [state.consoleMessages])

  return (
    <div className="p-2 px-8 pt-4 min-h-full bg-ch-gray-800">
      <div>
        {state.consoleMessages?.map(({ type, message, time }, index) => (
          <pre
            className="font-mono text-sm text-gray-400"
            key={`${message} ${index}`}
          >
            <div className="text-xs font-bold pt-2 text-ch-blue-400">
              {time?.toLocaleString()}
            </div>
            <div className={(type === 'error' ? 'text-red-400' : '') + ' pl-4'}>
              {(message || '').split('\n').map((line, index) => {
                return (
                  <div key={index}>
                    {line.startsWith('ECHO:') ? (
                      <span className="text-xs">
                        ECHO:{' '}
                        <span className="text-purple-300 font-semibold text-base">
                          {line.slice(6)}
                        </span>
                      </span>
                    ) : (
                      line
                    )}
                  </div>
                )
              })}
            </div>
          </pre>
        ))}
      </div>
    </div>
  )
}

export default IdeConsole