import Term from 'term-web';

var term = new Term({
    // ... options
    container: '#term',
});

{
    // Mounted dom element
    container: '#term',

    // Debug mode
    debug: false,

    // Initial size
    width: 600,
    height: 500,

    // Custom actions
    actions: [],

    // Use the display recorder button
    recorder: true,

    // Is it draggable
    draggable: true,

    // Font size
    fontSize: 13,

    // Font family
    fontFamily: 'monospace',

    // Watermark image url
    watermark: '',

    // Font color
    color: '#b0b2b6',

    // Background color
    background: 'rgb(42, 39, 52)',

    // Title on the topbar
    title: 'Term Web',

    // Entered prefix
    prefix: 'root@linux: ~ <d color="#00f501">$</d> ',

    // Welcome Message
    welcome: `Last login: ${new Date()}`,

    // Loading tips
    loading: (val) => '<d color="yellow">Loading...</d>',

    // Pixel ratio
    pixelRatio: window.devicePixelRatio,

    // Callback when command is not found
    notFound: (val) => `-bash: <d color='red'>${val}</d>: command not found`,
}

term.ask('How are you ?').then((answer) => console.log(answer));

term.radio([
    {
        key: 1,
        text: 'hi',
    },
    {
        key: 0,
        text: 'bye',
    },
]).then((key) => {
    console.log(key);
});

term.checkbox([
    {
        key: 1,
        text: 'hi',
    },
    {
        key: 0,
        text: 'bye',
    },
]).then((key) => {
    console.log(key);
});

term.color = '#fff';

term.background = '#000';

term.watermark = 'img.png';

term.width = 500;

term.height = 500;

term.output('<d color="#666">some text</d>');

term.output('<d color="#fff" background="red">some text</d>');

term.output('<d color="yellow" border>some text</d>');

term.output('<d color="yellow" underline>some text</d>');

term.output('<d color="yellow" del>some text</d>');

term.output('<d href="www.google.com">google</d>');

Term.font('Font Name', 'path/to/font.ttf').then((font) => {
    var term = new Term({
        fontFamily: font.family,
        // ... options
    });
});