import React from 'react'
import Editor from 'react-simple-code-editor'
import Prism from 'prismjs'
import 'prismjs/components/prism-nginx'
import 'prismjs/themes/prism-tomorrow.css'

interface NginxCodeEditorProps {
    value: string
    onChange: (value: string) => void
}

const NginxCodeEditor: React.FC<NginxCodeEditorProps> = ({ value, onChange }) => {
    return (
        <div style={{
            borderRadius: '4px',
            overflow: 'hidden',
            border: '1px solid rgba(255,255,255,0.1)',
            backgroundColor: '#1e1e1e',
            fontFamily: '"Fira code", "Fira Mono", monospace',
            fontSize: '14px',
            minHeight: '300px'
        }}>
            <Editor
                value={value}
                onValueChange={code => onChange(code)}
                highlight={code => Prism.highlight(code, Prism.languages.nginx, 'nginx')}
                padding={15}
                style={{
                    fontFamily: '"Fira code", "Fira Mono", monospace',
                    fontSize: 14,
                    minHeight: '400px',
                    outline: 'none'
                }}
                textareaClassName="nginx-editor-textarea"
                preClassName="nginx-editor-pre"
            />
            <style>{`
                .nginx-editor-textarea {
                    outline: none !important;
                }
                .nginx-editor-pre {
                    pointer-events: none;
                }
                .token.comment { color: #6a9955; }
                .token.directive { color: #569cd6; font-weight: bold; }
                .token.variable { color: #9cdcfe; }
                .token.string { color: #ce9178; }
                .token.number { color: #b5cea8; }
                .token.boolean { color: #569cd6; }
                .token.operator { color: #d4d4d4; }
                .token.punctuation { color: #d4d4d4; }
            `}</style>
        </div>
    )
}

export default NginxCodeEditor
