<script type="text/javascript" src="themes/clientbase/libs/mithril.min.js?{$revision}"></script>

<div align=center>
{if !$activate}
    <form action="edit_modules.php?module=yandex_payment" method="post">
        <input type="hidden" name="csrf" value="{$csrf}">
        <input type="hidden" name="activate" value="{$activate}">
        <input class="btn btn-default btn-sm" type="submit" value="Включить модуль"><br><br>
    </form>
{else}
    <style>
        #app { background: none; }
        .checkbox-yandex-table-component { vertical-align: text-bottom !important; margin-right: 10px !important; }
        .select-table { margin-top: 20px; }
        .span--success, .span--fail { margin-top: 10px; }
        .span--success { color: green; font-size: 13px; }
        .span--fail { color: red; font-size: 14px; }
        .module_yandex_payment_status { padding-top: 15px; }

        .access-component {
          padding-bottom: 20px;
        }

        .access-component div:nth-child(1) {
          font-size: 15px;
          font-weight: 600;
          padding-bottom: 6px;
        }

        .access-component__div {
          display: grid;
          width: 600px;
          grid-template-columns: 0.6fr 1fr;
          align-items: center;
        }

        .access-component__div input {
          justify-self: end;
        }

        .access-component__div span {
          justify-items: left;
          text-align: left;
          padding-left: 5px;
        }
    </style>
    <div id="app" style="display: flex;flex-direction: column;"></div>
    <script type="text/javascript" src="modules/yandex_payment/templates/Components.js"></script>
    <script>
        function setDataToStorage(data) {
            // console.log(data);
            Storage.shopId = {
                value: data['shopId'] == undefined ? '' : (data['shopId']['value'] == undefined ? '' : data['shopId']['value']),
                code: data['shopId'] == undefined ? 3 : (data['shopId']['code'] == undefined ? 3 : data['shopId']['code']),
            };
            Storage.apiKey = {
                value: data['apiKey'] == undefined ? '' : (data['apiKey']['value'] == undefined ? '' : data['apiKey']['value']),
                code: data['apiKey'] == undefined ? 0 : (data['apiKey']['code'] == undefined ? 0 : data['apiKey']['code']),
            };
            Storage.tables = data['tables'] == undefined ? new Array : data['tables'];
            Storage.subtables = data['subtables'] == undefined ? {} : data['subtables'];
            Storage.loading = false;
            Storage.groups = data?.groups || [];
            m.mount(document.getElementById('app'), BaseComponent);
        }

        let Storage = {
            loading: true,
            show: 0,
            set: {},
            flag: 0,
            shopId: { value: '', code: 2 },
            apiKey: { value: '', code: 2 },
            tables: new Array(),
            fields: { tableId: 0, fields: new Array(), filters: new Array() },
            subtables: {},

            checkConnection: function(shopId, apiKey) {
                if (shopId == '' || apiKey == '') return;
                let data = new FormData();
                data.append('csrf', csrf);
                data.append('action', 'checkConnectionToYandexCashDesc');
                data.append('shopId', shopId);
                data.append('apiKey', apiKey);
                m.request({
                    url: 'modules/yandex_payment/get-data.php',
                    method: 'POST',
                    data: data
                })
                .then(function(responce) {
                    if (responce === 1) {
                        let data = new FormData();
                        data.append('csrf', csrf);
                        data.append('action', 'saveKeys');
                        data.append('shopId', shopId);
                        data.append('apiKey', apiKey);
                        m.request({
                            url: 'modules/yandex_payment/get-data.php',
                            method: 'POST',
                            data: data
                        })
                        .then(function(responce) {
                            Storage.shopId['code'] = 1;
                            Storage.apiKey['code'] = 1;
                            if (Storage.flag == 1) Storage.save();
                        })
                    }
                    else {
                        Storage.shopId['code'] = 0;
                        Storage.apiKey['code'] = 0;
                        jalert('Неправильный ключ api или идентификатор магазина.');
                    }
                });
            },
            size: function() {
                let size = 0;
                for (let i in Storage.set) {
                    if (i == 'new') continue;
                    else size = i;
                }
                return size;
            },
            countProperties: function(arr) {
                let size = 0;
                for (let i in arr) size++;
                return size;
            },
            save: function() {
                let data = new FormData();
                data.append('csrf', csrf);
                data.append('action', 'save');
                data.append('shopId', Storage.shopId['value']);
                data.append('apiKey', Storage.apiKey['value']);
                data.append('set', JSON.stringify(Storage.set));
                data.append('groups', JSON.stringify(Storage.groups));
                m.request({
                    url: 'modules/yandex_payment/get-data.php',
                    method: 'POST',
                    data: data
                })
                .then(function (responce) {
                    window.location.reload();
                });
            },
        };

        const json = JSON.parse('{$data|addslashes|default:"{ }"}');
        // console.log(json);
        setDataToStorage(json);
    </script>
</div>
{/if}
