{"size": 3711, "ext": "js", "max_stars_repo_path": "packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/index.js", "max_stars_repo_name": "tiagolima90/strapi", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/index.js", "max_issues_repo_name": "tiagolima90/strapi", "max_issues_repo_issues_event_min_datetime": "2016-08-11T16:57:14.000Z", "max_issues_repo_issues_event_max_datetime": "2016-08-11T19:43:20.000Z", "max_forks_repo_path": "packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/index.js", "max_forks_repo_name": "tiagolima90/strapi", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 31.1848739496, "max_line_length": 110, "alphanum_fraction": 0.5691188359}
import React, { useReducer } from 'react';
import { useIntl } from 'react-intl';
import PropTypes from 'prop-types';
import { CarouselInput, CarouselSlide, CarouselActions } from '@strapi/design-system/CarouselInput';
import { IconButton } from '@strapi/design-system/IconButton';
import { Box } from '@strapi/design-system/Box';
import Plus from '@strapi/icons/Plus';
import Refresh from '@strapi/icons/Refresh';
import reducer, { initialState } from './reducer';
import LogoModalStepper from '../LogoModalStepper';
import { SIZE, DIMENSION } from '../../utils/constants';
import stepper from './stepper';

const LogoInput = ({ customLogo, defaultLogo, onChangeLogo, onResetMenuLogo }) => {
  const [{ currentStep }, dispatch] = useReducer(reducer, initialState);
  const { Component, next, prev, modalTitle } = stepper[currentStep] || {};
  const { formatMessage } = useIntl();

  const goTo = to => {
    dispatch({
      type: 'GO_TO',
      to,
    });
  };

  return (
    <>
      <CarouselInput
        label={formatMessage({
          id: 'Settings.application.customization.carousel.title',
          defaultMessage: 'Logo',
        })}
        selectedSlide={0}
        hint={formatMessage(
          {
            id: 'Settings.application.customization.carousel-hint',
            defaultMessage:
              'Change the admin panel logo (Max dimension: {dimension}x{dimension}, Max file size: {size}KB)',
          },
          { size: SIZE, dimension: DIMENSION }
        )}
        // Carousel is used here for a single media,
        // we don't need previous and next labels but these props are required
        previousLabel=""
        nextLabel=""
        onNext={() => {}}
        onPrevious={() => {}}
        secondaryLabel={customLogo?.name || 'logo.png'}
        actions={
          <CarouselActions>
            <IconButton
              onClick={() => goTo(customLogo ? 'pending' : 'upload')}
              label={formatMessage({
                id: 'Settings.application.customization.carousel.change-action',
                defaultMessage: 'Change logo',
              })}
              icon={<Plus />}
            />
            {customLogo && (
              <IconButton
                onClick={onResetMenuLogo}
                label={formatMessage({
                  id: 'Settings.application.customization.carousel.reset-action',
                  defaultMessage: 'Reset logo',
                })}
                icon={<Refresh />}
              />
            )}
          </CarouselActions>
        }
      >
        <CarouselSlide
          label={formatMessage({
            id: 'Settings.application.customization.carousel-slide.label',
            defaultMessage: 'Logo slide',
          })}
        >
          <Box
            maxHeight="40%"
            maxWidth="40%"
            as="img"
            src={customLogo?.url || defaultLogo}
            alt={formatMessage({
              id: 'Settings.application.customization.carousel.title',
              defaultMessage: 'Logo',
            })}
          />
        </CarouselSlide>
      </CarouselInput>
      <LogoModalStepper
        Component={Component}
        currentStep={currentStep}
        onChangeLogo={onChangeLogo}
        customLogo={customLogo}
        goTo={goTo}
        next={next}
        prev={prev}
        modalTitle={modalTitle}
      />
    </>
  );
};

LogoInput.defaultProps = {
  customLogo: null,
};

LogoInput.propTypes = {
  customLogo: PropTypes.shape({
    url: PropTypes.string,
    name: PropTypes.string,
  }),
  defaultLogo: PropTypes.string.isRequired,
  onChangeLogo: PropTypes.func.isRequired,
  onResetMenuLogo: PropTypes.func.isRequired,
};

export default LogoInput;
