'use strict';

import React, {
  useCallback,
  useRef,
  useState,
  useEffect,
  StrictMode,
} from 'react';
import { createRoot } from 'react-dom/client';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-enterprise';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';
import './styles.css';
import { IOlympicData } from './interfaces';

const defaultColDef = {
  flex: 1,
  minWidth: 150,
  filter: true,
};

const style = { width: '100%', height: '100%' };

const columnDefs = [
  { field: 'athlete', filter: 'agTextColumnFilter' },
  { field: 'age', filter: 'agNumberColumnFilter', maxWidth: 100 },
  {
    field: 'country',
    filter: 'agSetColumnFilter',
    filterParams: { defaultToNothingSelected: true },
  },
  { field: 'year', maxWidth: 100 },
  { field: 'sport' },
];

const hardcodedSetFilter = {
  country: {
    type: 'set',
    values: ['Ireland', 'Russia'],
  },
};

const hardcodedNumberFilter = {
  age: {
    filterType: 'number',
    type: 'equals',
    filter: 23,
  },
};

const GridExample = () => {
  const gridRef = useRef<AgGridReact<IOlympicData>>(null);
  const [rowData, setRowData] = useState<IOlympicData[]>();
  const [filterModel, setFilterModel] = useState(null);

  useEffect(() => {
    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .then((resp) => resp.json())
      .then((data: IOlympicData[]) => setRowData(data));
  }, []);

  const restoreFilterModel = useCallback(() => {
    // Age Filter is working without any issue but Country filter does not.
    //gridRef.current.api.setFilterModel(hardcodedNumberFilter);

    // This does not trigger onFilterChanged() Why?
    gridRef.current.api.setFilterModel(hardcodedSetFilter);

    // Calling onFilterChanged does not work, it triggers onFilterChanged event
    // BUT: When I call getFilterModel inside onFilterChanged, it gets {}
    // gridRef.current.api.onFilterChanged()
  }, [gridRef]);

  const onGridReady = useCallback(restoreFilterModel, [restoreFilterModel]);

  const onFilterChanged = useCallback(() => {
    const filterModel = gridRef.current.api.getFilterModel() || {};
    console.log('onFilterChanged', filterModel);
    setFilterModel(filterModel);
  }, [gridRef]);

  return (
    <div style={style}>
      <div className="example-wrapper">
        FilterModel: <pre>{JSON.stringify(filterModel, null, 2)}</pre>
        <div style={style} className={'ag-theme-quartz-dark'}>
          <AgGridReact<IOlympicData>
            ref={gridRef}
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            onGridReady={onGridReady}
            onFilterChanged={onFilterChanged}
          />
        </div>
      </div>
    </div>
  );
};

const root = createRoot(document.getElementById('root')!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>
);

export interface IOlympicData {
  athlete: string;
  age: number;
  country: string;
  year: number;
  date: string;
  sport: string;
  gold: number;
  silver: number;
  bronze: number;
  total: number;
}

.example-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#myGrid {
  flex: 1 1 0px;
  width: 100%;
}

.button-group {
  padding-bottom: 1rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
}

(function (global) {
    System.config({
        transpiler: 'ts',
        typescriptOptions: {
            module: 'system',
            moduleResolution: 'node',
            target: 'es2015',
            noImplicitAny: false,
            sourceMap: true,
            jsx: 'react',
            lib: ['es2015', 'dom'],
        },
        paths: {
            // paths serve as alias
            'npm:': 'https://cdn.jsdelivr.net/npm/',
            ...systemJsPaths
        },
        map: {
            css: boilerplatePath + "css.js",

            // react
            react: 'npm:react@18.2.0',
            'react-dom': 'npm:react-dom@18.2.0',
            'react-dom/client': 'npm:react-dom@18.2.0',
            redux: 'npm:redux@4.2.1',
            'react-redux': 'npm:react-redux@8.0.5',
            'prop-types': 'npm:prop-types@15.8.1',

            ts: "npm:plugin-typescript@8.0.0/lib/plugin.js",
            typescript: "npm:typescript@4.3.5/lib/typescript.min.js",

            app: appLocation,
            // systemJsMap comes from index.html
            ...systemJsMap
        },
        packages: {
            css: {
            },
            react: {
                main: './umd/react.production.min.js',
            },
            'react-dom': {
                main: './umd/react-dom.production.min.js',
            },
            'react-dom/server': {
                main: '../umd/react-dom-server.browser.production.min.js',
            },
            redux: {
                main: './dist/redux.min.js',
                defaultExtension: 'js',
            },
            'react-redux': {
                main: './dist/react-redux.min.js',
                defaultExtension: 'js',
            },
            'prop-types': {
                main: './prop-types.min.js',
                defaultExtension: 'js',
            },

            app: {
                main: './index.tsx',
                defaultExtension: 'tsx',
            },
            'ag-grid-react': {
                main: './lib/main.js',
                defaultExtension: 'js'
            },
            'ag-grid-community': {
                main: './dist/ag-grid-community.cjs.min.js',
                defaultExtension: 'js'
            },
            'ag-grid-enterprise': {
                main: './dist/ag-grid-enterprise.cjs.min.js',
                defaultExtension: 'js'
            },
            '@ag-grid-community/react': {
                main: './lib/main.mjs',
                defaultExtension: 'mjs',
            },
            'ag-charts-community': {
                main: './dist/package/main.cjs.js',
                defaultExtension: 'js'
            },
            // 'ag-charts-enterprise': {
            //     main: './dist/package/main.cjs.js',
            //     defaultExtension: 'js'
            // },
        },
        meta: {
            typescript: {
                exports: 'ts',
            },
            '*.css': { loader: 'css' },
        },
    });
})(this);

window.addEventListener('error', e => {
    console.error('ERROR', e.message, e.filename)
});

if (typeof window !== 'undefined') {
    var waitSeconds = 100;

    var head = document.getElementsByTagName('head')[0];

    var isWebkit = !!window.navigator.userAgent.match(/AppleWebKit\/([^ ;]*)/);
    var webkitLoadCheck = function(link, callback) {
        setTimeout(function() {
            for (var i = 0; i < document.styleSheets.length; i++) {
                var sheet = document.styleSheets[i];
                if (sheet.href == link.href)
                    return callback();
            }
            webkitLoadCheck(link, callback);
        }, 10);
    };

    var cssIsReloadable = function cssIsReloadable(links) {
        // Css loaded on the page initially should be skipped by the first
        // systemjs load, and marked for reload
        var reloadable = true;
        forEach(links, function(link) {
            if(!link.hasAttribute('data-systemjs-css')) {
                reloadable = false;
                link.setAttribute('data-systemjs-css', '');
            }
        });
        return reloadable;
    }

    var findExistingCSS = function findExistingCSS(url){
        // Search for existing link to reload
        var links = head.getElementsByTagName('link')
        return filter(links, function(link){ return link.href === url; });
    }

    var noop = function() {};

    var loadCSS = function(url, existingLinks) {
        const stylesUrl = url.includes("styles.css") || url.includes("style.css");
        return new Promise((outerResolve, outerReject) => {
            setTimeout(() => {
                new Promise(function(resolve, reject) {
                    var timeout = setTimeout(function() {
                        reject('Unable to load CSS');
                    }, waitSeconds * 1000);
                    var _callback = function(error) {
                        clearTimeout(timeout);
                        link.onload = link.onerror = noop;
                        setTimeout(function() {
                            if (error) {
                                reject(error);
                                outerReject(error)
                            } else {
                                resolve('');
                                outerResolve('');
                            }
                        }, 7);
                    };
                    var link = document.createElement('link');
                    link.type = 'text/css';
                    link.rel = 'stylesheet';
                    link.href = url;
                    link.setAttribute('data-systemjs-css', '');
                    if (!isWebkit) {
                        link.onload = function() {
                            _callback();
                        }
                    } else {
                        webkitLoadCheck(link, _callback);
                    }
                    link.onerror = function(event) {
                        _callback(event.error || new Error('Error loading CSS file.'));
                    };
                    if (existingLinks.length)
                        head.insertBefore(link, existingLinks[0]);
                    else
                        head.appendChild(link);
                })
                    // Remove the old link regardless of loading outcome
                    .then(function(result){
                        forEach(existingLinks, function(link){link.parentElement.removeChild(link);})
                        return result;
                    }, function(err){
                        forEach(existingLinks, function(link){link.parentElement.removeChild(link);})
                        throw err;
                    })
            }, stylesUrl ? 5 : 0)
        })
    };

    exports.fetch = function(load) {
        // dont reload styles loaded in the head
        var links = findExistingCSS(load.address);
        if(!cssIsReloadable(links))
            return '';
        return loadCSS(load.address, links);
    };
}
else {
    var builderPromise;
    function getBuilder(loader) {
        if (builderPromise)
            return builderPromise;

        return builderPromise = System['import']('./css-plugin-base.js', module.id)
            .then(function(CSSPluginBase) {
                return new CSSPluginBase(function compile(source, address) {
                    return {
                        css: source,
                        map: null,
                        moduleSource: null,
                        moduleFormat: null
                    };
                });
            });
    }

    exports.cssPlugin = true;
    exports.fetch = function(load, fetch) {
        if (!this.builder)
            return '';
        return fetch(load);
    };
    exports.translate = function(load, opts) {
        if (!this.builder)
            return '';
        var loader = this;
        return getBuilder(loader).then(function(builder) {
            return builder.translate.call(loader, load, opts);
        });
    };
    exports.instantiate = function(load, opts) {
        if (!this.builder)
            return;
        var loader = this;
        return getBuilder(loader).then(function(builder) {
            return builder.instantiate.call(loader, load, opts);
        });
    };
    exports.bundle = function(loads, compileOpts, outputOpts) {
        var loader = this;
        return getBuilder(loader).then(function(builder) {
            return builder.bundle.call(loader, loads, compileOpts, outputOpts);
        });
    };
    exports.listAssets = function(loads, opts) {
        var loader = this;
        return getBuilder(loader).then(function(builder) {
            return builder.listAssets.call(loader, loads, opts);
        });
    };
}

// Because IE8?
function filter(arrayLike, func) {
    var arr = []
    forEach(arrayLike, function(item){
        if(func(item))
            arr.push(item);
    });
    return arr;
}

// Because IE8?
function forEach(arrayLike, func){
    for (var i = 0; i < arrayLike.length; i++) {
        func(arrayLike[i])
    }
}

<!DOCTYPE html><html lang="en">
	<head>
		<title>React example</title>
		<meta charSet="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
		<style media="only screen">  
            html, body, #root {
                height: 100%;
                width: 100%;
                margin: 0;
                box-sizing: border-box;
                -webkit-overflow-scrolling: touch;
            }

            html {
                position: absolute;
                top: 0;
                left: 0;
                padding: 0;
                overflow: auto;
            }

            body {
                padding: 16px;
                overflow: auto;
                background-color: transparent
            }
            </style>
	</head>
	<body>
		<div id="root">
		</div>
		<object id="loading-spinner" style="position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(2)" type="image/svg+xml" data="https://ag-grid.com/images/ag-grid-loading-spinner.svg" aria-label="loading">
		</object>
		<script id="loading-script">(function() {
    const cleanupLoading = () => {
        if (document.querySelector('.ag-root-wrapper, .ag-chart-wrapper')) {
            document.querySelector('#loading-spinner').remove();
            document.querySelector('#loading-script').remove();
        } else {
            requestAnimationFrame(() => cleanupLoading());
        }
    };

    cleanupLoading();
})()</script>
		<script>
            var appLocation = './';
            var boilerplatePath = '';
            var systemJsMap = {
                "@ag-grid-community/react": "https://cdn.jsdelivr.net/npm/@ag-grid-community/react@31.0.1/",
                "@ag-grid-community/styles": "https://cdn.jsdelivr.net/npm/@ag-grid-community/styles@31.0.1",
                "ag-grid-community": "https://cdn.jsdelivr.net/npm/ag-grid-community@31.0.1",
                "ag-grid-enterprise": "https://cdn.jsdelivr.net/npm/ag-grid-enterprise@31.0.1/",
                "ag-grid-react": "https://cdn.jsdelivr.net/npm/ag-grid-react@31.0.1/"
            };
            var systemJsPaths = {
                "@ag-grid-community/client-side-row-model": "https://cdn.jsdelivr.net/npm/@ag-grid-community/client-side-row-model@31.0.1/dist/client-side-row-model.cjs.min.js",
                "@ag-grid-community/core": "https://cdn.jsdelivr.net/npm/@ag-grid-community/core@31.0.1/dist/core.cjs.min.js",
                "@ag-grid-community/csv-export": "https://cdn.jsdelivr.net/npm/@ag-grid-community/csv-export@31.0.1/dist/csv-export.cjs.min.js",
                "@ag-grid-community/infinite-row-model": "https://cdn.jsdelivr.net/npm/@ag-grid-community/infinite-row-model@31.0.1/dist/infinite-row-model.cjs.min.js",
                "@ag-grid-enterprise/advanced-filter": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/advanced-filter@31.0.1/dist/advanced-filter.cjs.min.js",
                "@ag-grid-enterprise/charts": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/charts@31.0.1/dist/charts.cjs.min.js",
                "@ag-grid-enterprise/clipboard": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/clipboard@31.0.1/dist/clipboard.cjs.min.js",
                "@ag-grid-enterprise/column-tool-panel": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/column-tool-panel@31.0.1/dist/column-tool-panel.cjs.min.js",
                "@ag-grid-enterprise/core": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/core@31.0.1/dist/core.cjs.min.js",
                "@ag-grid-enterprise/excel-export": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/excel-export@31.0.1/dist/excel-export.cjs.min.js",
                "@ag-grid-enterprise/filter-tool-panel": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/filter-tool-panel@31.0.1/dist/filter-tool-panel.cjs.min.js",
                "@ag-grid-enterprise/master-detail": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/master-detail@31.0.1/dist/master-detail.cjs.min.js",
                "@ag-grid-enterprise/menu": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/menu@31.0.1/dist/menu.cjs.min.js",
                "@ag-grid-enterprise/multi-filter": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/multi-filter@31.0.1/dist/multi-filter.cjs.min.js",
                "@ag-grid-enterprise/range-selection": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/range-selection@31.0.1/dist/range-selection.cjs.min.js",
                "@ag-grid-enterprise/rich-select": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/rich-select@31.0.1/dist/rich-select.cjs.min.js",
                "@ag-grid-enterprise/row-grouping": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/row-grouping@31.0.1/dist/row-grouping.cjs.min.js",
                "@ag-grid-enterprise/server-side-row-model": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/server-side-row-model@31.0.1/dist/server-side-row-model.cjs.min.js",
                "@ag-grid-enterprise/set-filter": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/set-filter@31.0.1/dist/set-filter.cjs.min.js",
                "@ag-grid-enterprise/side-bar": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/side-bar@31.0.1/dist/side-bar.cjs.min.js",
                "@ag-grid-enterprise/sparklines": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/sparklines@31.0.1/dist/sparklines.cjs.min.js",
                "@ag-grid-enterprise/status-bar": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/status-bar@31.0.1/dist/status-bar.cjs.min.js",
                "@ag-grid-enterprise/viewport-row-model": "https://cdn.jsdelivr.net/npm/@ag-grid-enterprise/viewport-row-model@31.0.1/dist/viewport-row-model.cjs.min.js",
                "ag-charts-community": "https://cdn.jsdelivr.net/npm/ag-charts-community/"
            };
        </script>
		<script src="https://cdn.jsdelivr.net/npm/systemjs@0.19.47/dist/system.js">
		</script>
		<script src="systemjs.config.js">
		</script>
		<script>System.import('./index.tsx').catch(function(err) { console.error(err); });</script>
	</body>
</html>