import { Box, CenterBox, Label, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js';
import Separator from '../misc/separator.js';

import Key from './keys.js';

import { defaultOskLayout, oskLayouts } from './keyboard-layouts.js';
const keyboardLayout = defaultOskLayout;
const keyboardJson = oskLayouts[keyboardLayout];

const L_KEY_PER_ROW = [8, 7, 6, 6, 6, 4];


export default window => CenterBox({
    class_name: 'osk',
    hexpand: true,
    start_widget: Box({
        class_name: 'left-side side',
        hpack: 'start',
        vertical: true,
        children: keyboardJson.keys.map((row, rowIndex) => Box({
            vertical: true,
            children: [
                Box({
                    class_name: 'row',
                    children: row.map((key, keyIndex) => {
                        return keyIndex < L_KEY_PER_ROW[rowIndex] ? Key(key) : null;
                    }),
                }),
                Separator(4, { vertical: true }),
            ],
        })),
    }),

    center_widget: Box({
        hpack: 'center',
        vpack: 'center',
        children: [
            Box({
                class_name: 'settings',
                children: [
                    ToggleButton({
                        cursor: 'pointer',
                        class_name: 'button',
                        active: true,
                        vpack: 'center',
                        connections: [['toggled', self => {
                            self.toggleClassName('toggled', self.get_active());
                            window.exclusivity = self.get_active() ? 'exclusive' : 'normal';
                        }]],
                        child: Label('Exclusive'),
                    }),
                ],
            }),
        ],
    }),

    end_widget: Box({
        class_name: 'right-side side',
        hpack: 'end',
        vertical: true,
        children: keyboardJson.keys.map((row, rowIndex) => Box({
            vertical: true,
            children: [
                Box({
                    hpack: 'end',
                    class_name: 'row',
                    children: row.map((key, keyIndex) => {
                        return keyIndex >= L_KEY_PER_ROW[rowIndex] ? Key(key) : null;
                    }),
                }),
                Separator(4, { vertical: true }),
            ],
        })),
    }),
});