text: // Copyright (c) 2022 Uber Technologies, Inc.
  //
  // Permission is hereby granted, free of charge, to any person obtaining a copy
  // of this software and associated documentation files (the "Software"), to deal
  // in the Software without restriction, including without limitation the rights
  // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  // copies of the Software, and to permit persons to whom the Software is
  // furnished to do so, subject to the following conditions:
  //
  // The above copyright notice and this permission notice shall be included in
  // all copies or substantial portions of the Software.
  //
  // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  // THE SOFTWARE.
  
  import React, {useEffect} from 'react';
  import styled from 'styled-components';
  import ImagePreview from 'components/common/image-preview';
  
  import {EXPORT_IMG_RATIO_OPTIONS, EXPORT_IMG_RESOLUTION_OPTIONS} from 'constants/default-settings';
  
  import {StyledModalContent, SelectionButton, CheckMark} from 'components/common/styled-components';
  import Switch from 'components/common/switch';
  import {injectIntl} from 'react-intl';
  import {FormattedMessage} from 'localization';
  
  const ImageOptionList = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 250px;
  
    .image-option-section {
      .image-option-section-title {
        font-weight: 500;
        font-size: 14px;
      }
    }
  
    .button-list {
      display: flex;
      flex-direction: row;
      padding: 8px 0px;
    }
  
    input {
      margin-right: 8px;
    }
  `;
  
  const ExportImageModalFactory = () => {
    /** @type {typeof import('./export-image-modal').ExportImageModal} */
    const ExportImageModal = ({
      mapW,
      mapH,
      exportImage,
      onUpdateImageSetting,
      cleanupExportImage,
      intl
    }) => {
      const {legend, ratio, resolution} = exportImage;
  
      useEffect(() => {
        onUpdateImageSetting({
          exporting: true
        });
        return cleanupExportImage;
      }, [onUpdateImageSetting, cleanupExportImage]);
  
      useEffect(() => {
        if (mapH !== exportImage.mapH || mapW !== exportImage.mapW) {
          onUpdateImageSetting({
            mapH,
            mapW
          });
        }
      }, [mapH, mapW, exportImage, onUpdateImageSetting]);
  
      return (
        <StyledModalContent className="export-image-modal">
          <ImageOptionList>
            <div className="image-option-section">
              <div className="image-option-section-title">
                <FormattedMessage id={'modal.exportImage.ratioTitle'} />
              </div>
              <FormattedMessage id={'modal.exportImage.ratioDescription'} />
              <div className="button-list" id="export-image-modal__option_ratio">
                {EXPORT_IMG_RATIO_OPTIONS.filter(op => !op.hidden).map(op => (
                  <SelectionButton
                    key={op.id}
                    selected={ratio === op.id}
                    onClick={() => onUpdateImageSetting({ratio: op.id})}
                  >
                    <FormattedMessage id={op.label} />
                    {ratio === op.id && <CheckMark />}
                  </SelectionButton>
                ))}
              </div>
            </div>
            <div className="image-option-section">
              <div className="image-option-section-title">
                <FormattedMessage id={'modal.exportImage.resolutionTitle'} />
              </div>
              <FormattedMessage id={'modal.exportImage.resolutionDescription'} />
              <div className="button-list" id="export-image-modal__option_resolution">
                {EXPORT_IMG_RESOLUTION_OPTIONS.map(op => (
                  <SelectionButton
                    key={op.id}
                    selected={resolution === op.id}
                    onClick={() => op.available && onUpdateImageSetting({resolution: op.id})}
                  >
                    {op.label}
                    {resolution === op.id && <CheckMark />}
                  </SelectionButton>
                ))}
              </div>
            </div>
            <div className="image-option-section">
              <div className="image-option-section-title">
                <FormattedMessage id={'modal.exportImage.mapLegendTitle'} />
              </div>
              <Switch
                type="checkbox"
                id="add-map-legend"
                checked={legend}
                label={intl.formatMessage({id: 'modal.exportImage.mapLegendAdd'})}
                onChange={() => onUpdateImageSetting({legend: !legend})}
              />
            </div>
          </ImageOptionList>
          <ImagePreview exportImage={exportImage} />
        </StyledModalContent>
      );
    };
  
    return injectIntl(ExportImageModal);
  };
  
  export default ExportImageModalFactory;
  