import proj4 from 'proj4';
import {Fill, Stroke, Style} from 'ol/style';
import {OSM, Vector as VectorSource} from 'ol/source';
import {Tile, Vector as VectorLayer} from 'ol/layer';
import {TopoJSON} from 'ol/format';
import {View} from 'ol';
import {get as getProjection, transform} from 'ol/proj';
import {register} from 'ol/proj/proj4';

import i18n from './translations.json';

proj4.defs(
  'EPSG:3045',
  '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
);
proj4.defs(
  'EPSG:5514',
  '+proj=krovak +lat_0=49.5 +lon_0=24.83333333333333 +alpha=30.28813972222222 +k=0.9999 +x_0=0 +y_0=0 +ellps=bessel +towgs84=542.5,89.2,456.9,5.517,2.275,5.516,6.96 +units=m +no_defs'
);
register(proj4);
const sjtskProjection = getProjection('EPSG:5514');
//const utm33nProjection = getProjection('EPSG:3045');

function getHostname() {
  const url = window.location.href;
  const urlArr = url.split('/');
  const domain = urlArr[2];
  return urlArr[0] + '//' + domain;
}

export const osmLayer = new Tile({
  source: new OSM(),
  title: 'OpenStreetMap',
  base: true,
  editor: {editable: false},
  removable: false,
});

export const perc2color = (perc: number): string => {
  perc = perc * 100;
  let r;
  let g;
  const b = 0;
  if (perc < 50) {
    r = 255;
    g = Math.round(5.1 * perc);
  } else {
    g = 255;
    r = Math.round(510 - 5.1 * perc);
  }
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const h = r * 0x10000 + g * 0x100 + b * 0x1;
  return `rgba(${r}, ${g}, ${b}, 0.7)`;
};

const decimal2prettyPerc = (x) => {
  return `${(x * 100).toFixed(2)}&nbsp;%`;
};

const indexStyle = (feature) => {
  if (isNaN(feature.get('aggregate'))) {
    return [
      new Style({
        fill: new Fill({
          color: '#FFF',
        }),
        stroke: new Stroke({
          color: '#3399CC',
          width: 0.25,
        }),
      }),
    ];
  } else {
    return [
      new Style({
        fill: new Fill({
          color: perc2color(feature.get('aggregate')),
        }),
        stroke: new Stroke({
          color: '#FFFFFF',
          width: 0.15,
        }),
      }),
    ];
  }
};

export const obce = new VectorSource({
  format: new TopoJSON({dataProjection: 'EPSG:5514'}),
  url: require('./data/obce_cr_20210310_5p_5514.topojson').default,
  overlaps: false,
});

export const obceIndexLayer = new VectorLayer({
  source: obce,
  editor: {editable: false},
  visible: true,
  style: indexStyle,
  title: 'Obce ČR: Rural attractiveness index',
  attributions: ['CC-BY ČÚZK, 2021'],
});
obceIndexLayer.set('popUp', {
  attributes: [
    {
      attribute: 'aggregate',
      label: 'agregovaný index',
      displayFunction: decimal2prettyPerc,
    },
    {
      attribute: 'Konec chudoby',
      displayFunction: decimal2prettyPerc,
    },
    {
      attribute: 'Zdraví a kvalitní život',
      displayFunction: decimal2prettyPerc,
    },
    {
      attribute: 'Kvalitní vzdělání',
      displayFunction: decimal2prettyPerc,
    },
    {
      attribute: 'Důstojná práce a ekonomický růst',
      displayFunction: decimal2prettyPerc,
    },
    {
      attribute: 'Udržitelná města a obce',
      displayFunction: decimal2prettyPerc,
    },
    {
      attribute: 'Ostatní',
      displayFunction: decimal2prettyPerc,
    },
  ],
});
obceIndexLayer.set('editable', false);
//obceIndexLayer.set('queryable', false);

const okresyStyle = new Style({
  stroke: new Stroke({
    color: '#111111',
    width: 0.4,
  }),
});

export const okresyLayer = new VectorLayer({
  source: new VectorSource({
    format: new TopoJSON({dataProjection: 'EPSG:5514'}),
    url: require('./data/okresy_cr_20210310_5p_5514.topojson').default,
    overlaps: false,
  }),
  editor: {editable: false},
  visible: false,
  style: okresyStyle,
  title: 'Okresy ČR',
  attributions: ['CC-BY ČÚZK, 2021'],
});

const krajeStyle = new Style({
  stroke: new Stroke({
    color: '#000000',
    width: 0.6,
  }),
});

export const krajeLayer = new VectorLayer({
  source: new VectorSource({
    format: new TopoJSON({dataProjection: 'EPSG:5514'}),
    url: require('./data/kraje_cr_20210310_5p_5514.topojson').default,
    overlaps: false,
  }),
  editor: {editable: false},
  visible: true,
  style: krajeStyle,
  title: 'Kraje ČR',
  attributions: ['CC-BY ČÚZK, 2021'],
});

export const AppConfig = {
  //proxyPrefix: '../8085/',
  default_layers: [osmLayer],
  popUpDisplay: 'hover',
  project_name: 'erra/map',
  default_view: new View({
    projection: sjtskProjection,
    center: transform([15.628, 49.864249], 'EPSG:4326', 'EPSG:5514'),
    zoom: 7.6,
    units: 'm',
  }),
  advanced_form: true,
  datasources: [],
  hostname: {
    default: {
      title: 'Default',
      type: 'default',
      editable: false,
      url: getHostname(),
    },
  },
  panelWidths: {
    datasource_selector: 400,
  },
  panelsEnabled: {
    composition_browser: false,
    feature_crossfilter: false,
    info: true,
    saveMap: false,
    sensors: false,
    tracking: false,
    routing: false,
    permalink: false,
    legend: false,
    feature_table: false,
    draw: false,
  },
  status_manager_url: '/statusmanager/',
  sidebarPosition: 'right',
  sizeMode: 'fullscreen',
  translationOverrides: i18n,
};

export default AppConfig;