/* eslint-disable react/jsx-indent-props */
/* eslint-disable import/no-absolute-path */

import React from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';
import { createControlComponent } from '@react-leaflet/core';
import L from 'leaflet';
import 'leaflet.fullscreen';
import 'leaflet.fullscreen/Control.FullScreen.css';

// Replacement for react-leaflet-fullscreen (v1-only): wrap the vanilla
// leaflet.fullscreen control with react-leaflet v4's control factory.
const FullscreenControl = createControlComponent(
  ({ position = 'topleft', title, titleCancel }) => L.control.fullscreen({ position, title, titleCancel })
);

const FullScreenMap = ({ t }) => (
  <FullscreenControl
      position="topleft"
      title={t('Pantalla completa')}
      titleCancel={t('Salir de pantalla completa')}
  />
);

FullScreenMap.propTypes = {
  t: PropTypes.func.isRequired
};

export default withTranslation()(FullScreenMap);