import React, {useState, useEffect} from "react";
import CodeMirror from "@uiw/react-codemirror";
import {loadLanguage} from '@uiw/codemirror-extensions-langs';
import {hyperLink} from '@uiw/codemirror-extensions-hyper-link';
import {oneDark} from '@codemirror/theme-one-dark';
import {EditorView} from '@codemirror/view';

interface ConfigCodeEditorProps {
    content: string;
    fileName: string;
    onContentChange: (value: string) => void;
}

export function ConfigCodeEditor({content, fileName, onContentChange}: ConfigCodeEditorProps) {
    function getLanguageName(filename: string): string {
        if (!filename || typeof filename !== 'string') {
            return 'text';
        }
        const lastDotIndex = filename.lastIndexOf('.');
        if (lastDotIndex === -1) {
            return 'text';
        }
        const ext = filename.slice(lastDotIndex + 1).toLowerCase();

        switch (ext) {
            case 'ng':
                return 'angular';
            case 'apl':
                return 'apl';
            case 'asc':
                return 'asciiArmor';
            case 'ast':
                return 'asterisk';
            case 'bf':
                return 'brainfuck';
            case 'c':
                return 'c';
            case 'ceylon':
                return 'ceylon';
            case 'clj':
                return 'clojure';
            case 'cmake':
                return 'cmake';
            case 'cob':
            case 'cbl':
                return 'cobol';
            case 'coffee':
                return 'coffeescript';
            case 'lisp':
                return 'commonLisp';
            case 'cpp':
            case 'cc':
            case 'cxx':
                return 'cpp';
            case 'cr':
                return 'crystal';
            case 'cs':
                return 'csharp';
            case 'css':
                return 'css';
            case 'cypher':
                return 'cypher';
            case 'd':
                return 'd';
            case 'dart':
                return 'dart';
            case 'diff':
            case 'patch':
                return 'diff';
            case 'dockerfile':
                return 'dockerfile';
            case 'dtd':
                return 'dtd';
            case 'dylan':
                return 'dylan';
            case 'ebnf':
                return 'ebnf';
            case 'ecl':
                return 'ecl';
            case 'eiffel':
                return 'eiffel';
            case 'elm':
                return 'elm';
            case 'erl':
                return 'erlang';
            case 'factor':
                return 'factor';
            case 'fcl':
                return 'fcl';
            case 'fs':
                return 'forth';
            case 'f90':
            case 'for':
                return 'fortran';
            case 's':
                return 'gas';
            case 'feature':
                return 'gherkin';
            case 'go':
                return 'go';
            case 'groovy':
                return 'groovy';
            case 'hs':
                return 'haskell';
            case 'hx':
                return 'haxe';
            case 'html':
            case 'htm':
                return 'html';
            case 'http':
                return 'http';
            case 'idl':
                return 'idl';
            case 'java':
                return 'java';
            case 'js':
            case 'mjs':
            case 'cjs':
                return 'javascript';
            case 'jinja2':
            case 'j2':
                return 'jinja2';
            case 'json':
                return 'json';
            case 'jsx':
                return 'jsx';
            case 'jl':
                return 'julia';
            case 'kt':
            case 'kts':
                return 'kotlin';
            case 'less':
                return 'less';
            case 'lezer':
                return 'lezer';
            case 'liquid':
                return 'liquid';
            case 'litcoffee':
                return 'livescript';
            case 'lua':
                return 'lua';
            case 'md':
                return 'markdown';
            case 'nb':
            case 'mat':
                return 'mathematica';
            case 'mbox':
                return 'mbox';
            case 'mmd':
                return 'mermaid';
            case 'mrc':
                return 'mirc';
            case 'moo':
                return 'modelica';
            case 'mscgen':
                return 'mscgen';
            case 'm':
                return 'mumps';
            case 'sql':
                return 'mysql';
            case 'nc':
                return 'nesC';
            case 'nginx':
                return 'nginx';
            case 'nix':
                return 'nix';
            case 'nsi':
                return 'nsis';
            case 'nt':
                return 'ntriples';
            case 'mm':
                return 'objectiveCpp';
            case 'octave':
                return 'octave';
            case 'oz':
                return 'oz';
            case 'pas':
                return 'pascal';
            case 'pl':
            case 'pm':
                return 'perl';
            case 'pgsql':
                return 'pgsql';
            case 'php':
                return 'php';
            case 'pig':
                return 'pig';
            case 'ps1':
                return 'powershell';
            case 'properties':
                return 'properties';
            case 'proto':
                return 'protobuf';
            case 'pp':
                return 'puppet';
            case 'py':
                return 'python';
            case 'q':
                return 'q';
            case 'r':
                return 'r';
            case 'rb':
                return 'ruby';
            case 'rs':
                return 'rust';
            case 'sas':
                return 'sas';
            case 'sass':
            case 'scss':
                return 'sass';
            case 'scala':
                return 'scala';
            case 'scm':
                return 'scheme';
            case 'shader':
                return 'shader';
            case 'sh':
            case 'bash':
                return 'shell';
            case 'siv':
                return 'sieve';
            case 'st':
                return 'smalltalk';
            case 'sol':
                return 'solidity';
            case 'solr':
                return 'solr';
            case 'rq':
                return 'sparql';
            case 'xlsx':
            case 'ods':
            case 'csv':
                return 'spreadsheet';
            case 'nut':
                return 'squirrel';
            case 'tex':
                return 'stex';
            case 'styl':
                return 'stylus';
            case 'svelte':
                return 'svelte';
            case 'swift':
                return 'swift';
            case 'tcl':
                return 'tcl';
            case 'textile':
                return 'textile';
            case 'tiddlywiki':
                return 'tiddlyWiki';
            case 'tiki':
                return 'tiki';
            case 'toml':
                return 'toml';
            case 'troff':
                return 'troff';
            case 'tsx':
                return 'tsx';
            case 'ttcn':
                return 'ttcn';
            case 'ttl':
            case 'turtle':
                return 'turtle';
            case 'ts':
                return 'typescript';
            case 'vb':
                return 'vb';
            case 'vbs':
                return 'vbscript';
            case 'vm':
                return 'velocity';
            case 'v':
                return 'verilog';
            case 'vhd':
            case 'vhdl':
                return 'vhdl';
            case 'vue':
                return 'vue';
            case 'wat':
                return 'wast';
            case 'webidl':
                return 'webIDL';
            case 'xq':
            case 'xquery':
                return 'xQuery';
            case 'xml':
                return 'xml';
            case 'yacas':
                return 'yacas';
            case 'yaml':
            case 'yml':
                return 'yaml';
            case 'z80':
                return 'z80';
            default:
                return 'text';
        }
    }

    useEffect(() => {
        document.body.style.overflowX = 'hidden';
        return () => {
            document.body.style.overflowX = '';
        };
    }, []);

    return (
        <div style={{
            width: '100%',
            height: '100%',
            position: 'relative',
            overflow: 'hidden',
            display: 'flex',
            flexDirection: 'column'
        }}>
            <div
                style={{
                    width: '100%',
                    height: '100%',
                    overflow: 'auto',
                    flex: 1,
                    display: 'flex',
                    flexDirection: 'column',
                }}
                className="config-codemirror-scroll-wrapper"
            >
                <CodeMirror
                    value={content}
                    extensions={[
                        loadLanguage(getLanguageName(fileName || 'untitled.txt') as any) || [],
                        hyperLink,
                        oneDark,
                        EditorView.theme({
                            '&': {
                                backgroundColor: '#09090b !important',
                            },
                            '.cm-gutters': {
                                backgroundColor: '#18181b !important',
                            },
                        })
                    ]}
                    onChange={(value: any) => onContentChange(value)}
                    theme={undefined}
                    height="100%"
                    basicSetup={{lineNumbers: true}}
                    style={{minHeight: '100%', minWidth: '100%', flex: 1}}
                />
            </div>
        </div>
    );
}