<commit_before>import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import ProfilePic from 'components/ProfilePic';
import ColorSelector from 'components/ColorSelector';
import Button from 'components/Button';
import AlertModal from 'components/Modals/AlertModal';
import ImageEditModal from 'components/Modals/ImageEditModal';
import moment from 'moment';
import ErrorBoundary from 'components/Wrappers/ErrorBoundary';
import { openDirectMessageChannel } from 'redux/actions/ChatActions';
import { uploadProfilePic } from 'redux/actions/UserActions';
import { css } from 'emotion';
import { borderRadius, Color, mobileMaxWidth } from 'constants/css';
import { profileThemes } from 'constants/defaultValues';
import { connect } from 'react-redux';

Cover.propTypes = {
  profile: PropTypes.shape({
    id: PropTypes.number.isRequired,
    online: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
    profilePicId: PropTypes.number,
    profileTheme: PropTypes.string,
    realName: PropTypes.string,
    username: PropTypes.string
  }),
  openDirectMessageChannel: PropTypes.func.isRequired,
  onSelectTheme: PropTypes.func.isRequired,
  onSetTheme: PropTypes.func.isRequired,
  selectedTheme: PropTypes.string,
  uploadProfilePic: PropTypes.func,
  userId: PropTypes.number
};

const ChristmasCover = '/img/christmas-cover.png';
const MarchFirstCover = '/img/march-first-cover.png';
const MarchCover = '/img/march-cover.png';
const NewYearsCover = '/img/newyears-cover.png';
const ValentinesCover = '/img/valentines-cover.png';

const backgroundImageObj = {
  black: {
    0: NewYearsCover,
    1: NewYearsCover,
    2: MarchFirstCover,
    11: ChristmasCover
  },
  rose: {
    1: ValentinesCover
  },
  logoBlue: {
    2: MarchCover
  }
};

function Cover({
  userId,
  profile: {
    id,
    rank,
    profilePicId,
    online,
    profileTheme,
    realName,
    twinkleXP,
    username,
    userType
  },
  onSelectTheme,
  onSetTheme,
  openDirectMessageChannel,
  uploadProfilePic,
  selectedTheme
}) {
  const showCover =
    rank <= 30 &&
    rank > 0 &&
    twinkleXP &&
    !!backgroundImageObj[selectedTheme || profileTheme]?.[moment().month()];
  const [alertModalShown, setAlertModalShown] = useState(false);
  const [colorSelectorShown, setColorSelectorShown] = useState(false);
  const [imageEditModalShown, setImageEditModalShown] = useState(false);
  const [imageUri, setImageUri] = useState(null);
  const [processing, setProcessing] = useState(false);
  const FileInputRef = useRef(null);

  useEffect(() => {
    onSelectTheme(profileTheme || 'logoBlue');
  }, []);

  return (
    <ErrorBoundary>
      <div
        style={{
          color:
            showCover &&
            ['black', 'rose'].indexOf(selectedTheme || profileTheme) !== -1
              ? Color.gold()
              : '#fff',
          backgroundImage: showCover
            ? `url(${
                backgroundImageObj[selectedTheme || profileTheme][
                  moment().month()
                ]
              })`
            : undefined,
          backgroundRepeat: 'no-repeat',
          backgroundSize: '100% 100%',
          backgroundColor:
            profileThemes[selectedTheme || profileTheme || 'logoBlue'].color
        }}
        className={css`
          height: 26rem;
          margin-top: -1rem;
          display: flex;<commit_msg>minor fix<commit_after>import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import ProfilePic from 'components/ProfilePic';
import ColorSelector from 'components/ColorSelector';
import Button from 'components/Button';
import AlertModal from 'components/Modals/AlertModal';
import ImageEditModal from 'components/Modals/ImageEditModal';
import moment from 'moment';
import ErrorBoundary from 'components/Wrappers/ErrorBoundary';
import { openDirectMessageChannel } from 'redux/actions/ChatActions';
import { uploadProfilePic } from 'redux/actions/UserActions';
import { css } from 'emotion';
import { borderRadius, Color, mobileMaxWidth } from 'constants/css';
import { profileThemes } from 'constants/defaultValues';
import { connect } from 'react-redux';

Cover.propTypes = {
  profile: PropTypes.shape({
    id: PropTypes.number.isRequired,
    online: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
    profilePicId: PropTypes.number,
    profileTheme: PropTypes.string,
    realName: PropTypes.string,
    username: PropTypes.string
  }),
  openDirectMessageChannel: PropTypes.func.isRequired,
  onSelectTheme: PropTypes.func.isRequired,
  onSetTheme: PropTypes.func.isRequired,
  selectedTheme: PropTypes.string,
  uploadProfilePic: PropTypes.func,
  userId: PropTypes.number
};

const ChristmasCover = '/img/christmas-cover.png';
const MarchFirstCover = '/img/march-first-cover.png';
const MarchCover = '/img/march-cover.png';
const NewYearsCover = '/img/newyears-cover.png';
const ValentinesCover = '/img/valentines-cover.png';

const backgroundImageObj = {
  black: {
    0: NewYearsCover,
    1: NewYearsCover,
    2: MarchFirstCover,
    11: ChristmasCover
  },
  rose: {
    1: ValentinesCover
  },
  logoBlue: {
    2: MarchCover,
    3: MarchCover
  }
};

function Cover({
  userId,
  profile: {
    id,
    rank,
    profilePicId,
    online,
    profileTheme,
    realName,
    twinkleXP,
    username,
    userType
  },
  onSelectTheme,
  onSetTheme,
  openDirectMessageChannel,
  uploadProfilePic,
  selectedTheme
}) {
  const showCover =
    rank <= 30 &&
    rank > 0 &&
    twinkleXP &&
    !!backgroundImageObj[selectedTheme || profileTheme]?.[moment().month()];
  const [alertModalShown, setAlertModalShown] = useState(false);
  const [colorSelectorShown, setColorSelectorShown] = useState(false);
  const [imageEditModalShown, setImageEditModalShown] = useState(false);
  const [imageUri, setImageUri] = useState(null);
  const [processing, setProcessing] = useState(false);
  const FileInputRef = useRef(null);

  useEffect(() => {
    onSelectTheme(profileTheme || 'logoBlue');
  }, []);

  return (
    <ErrorBoundary>
      <div
        style={{
          color:
            showCover &&
            ['black', 'rose', 'purple'].indexOf(
              selectedTheme || profileTheme
            ) !== -1
              ? Color.gold()
              : '#fff',
          backgroundImage: showCover
            ? `url(${
                backgroundImageObj[selectedTheme || profileTheme][
                  moment().month()
                ]
              })`
            : undefined,
          backgroundRepeat: 'no-repeat',
          backgroundSize: '100% 100%',
          backgroundColor:
            profileThemes[selectedTheme || profileTheme || 'logoBlue'].color
        }}
        className={css`
          height: 26rem;
          margin-top: -1rem;
          display: flex;
{'fraction_non_alphanumeric': 0.11830780452224654, 'fraction_numerical': 0.005981035740335521, 'mean_word_length': 3.250464972101674, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '650821', 'n_tokens_mistral': 2035, 'n_tokens_neox': 1999, 'n_words': 430}