<commit_before>import React from 'react'

import BatsBackground from '../../assets/images/bg_bats.svg'
import HeartsBackground from '../../assets/images/bg_hearts.svg'
import { BatColorIcon, YoutubeColorIcon, TwitterColorIcon, TwitchColorIcon } from 'brave-ui/components/icons'
import Checkbox from 'brave-ui/components/formControls/checkbox'

import {styles} from '../packs/brave_rewards_banner.style.jsx'

export default class BraveRewardsBanner extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      title: 'Your title',
      description: 'Welcome to Brave Rewards banner',
      backgroundImage: null,
      backgroundImageData: '',
      logoImage: null,
      logoImageData: '',
      youtube: '',
      twitter: '',
      twitch: '',
      conversionRate: 0.2,
      donationAmounts: [1, 5, 10],
      mode: 'Edit',
      width: '1320'
    }
     this.handleBackgroundImageUpload = this.handleBackgroundImageUpload.bind(this);
     this.handleLogoImageUpload = this.handleLogoImageUpload.bind(this);
     this.updateTitle = this.updateTitle.bind(this);
     this.updateDescription = this.updateDescription.bind(this)
     this.handleSave = this.handleSave.bind(this);
     this.fetchSiteBanner = this.fetchSiteBanner.bind(this);
     this.updateYoutube = this.updateYoutube.bind(this);
     this.updateTwitter = this.updateTwitter.bind(this);
     this.updateTwitch = this.updateTwitch.bind(this);
     this.fetchSiteBanner = this.fetchSiteBanner.bind(this);
     this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
  }

  componentWillMount(){
    this.modalize();
  }

  componentDidMount(){
    this.fetchSiteBanner();
    document.getElementsByClassName('brave-rewards-banner-control-bar-save-button')[0].addEventListener("click", this.handleSave);
    window.addEventListener('resize', this.updateWindowDimensions);
  }

  updateWindowDimensions() {
    if(window.innerWidth < 991){
      this.close();
    }
    else{
      this.setState({ width: 1320});
    }
}

  modalize(){
    document.getElementsByClassName("modal-panel")[0].style.maxWidth = 'none';
    document.getElementsByClassName("modal-panel")[0].style.padding = '0px';
    document.getElementsByClassName("modal-panel--content")[0].style.padding = '0px';
  }

  close(){
    document.getElementsByClassName("modal-panel")[0].style.maxWidth = '40rem';
    document.getElementsByClassName("modal-panel")[0].style.padding = '2rem 2rem';
    document.getElementsByClassName("modal-panel--content")[0].style.padding = '1rem 1rem 0 1rem';
    document.getElementsByClassName("modal-panel--close js-deny")[0].click();
  }

  fetchSiteBanner(){
    let that = this
    let id = document.getElementById("publisher_id").value;
    let url = '/publishers/' + id + "/site_banners/fetch";

    fetch(url, {
      method: 'GET',
      headers: {
        'Accept': 'text/html',
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-Token': document.head.querySelector("[name=csrf-token]").content
        },
        credentials: "same-origin",
        }).then(function(response) {
          return response.json();
        })
        .then(function(banner) {
          that.setState({
            title: banner.title,
            description: banner.description,
            backgroundImage: banner.backgroundImage,
            youtube: banner.socialLinks.youtube,
            twitter: banner.socialLinks.twitter,
            twitch: banner.socialLinks.twitch,
            donationAmounts: banner.donationAmounts,
          })

          that.cropFetchedLogo(banner.logoImage, that);
        });
  }

  updateTitle(event){
     this.setState({title: event.target.value})
  }

  updateDescription(event){
     this.setState({description: event.target.value})
  }

  updateYoutube(event){
     this.setState({youtube: event.target.value})
  }

  updateTwitter(event){
     this.setState({twitter: event.target.value})
  }

  updateTwitch(event){
     this.setState({twitch: event.target.value})
  }

  updateDonationAmounts(event, index){
    let temp = this.state.donationAmounts
    if(/^(\s*|\d+)$/.test(event.target.value)){
      temp[index] = event.target.value
      this.setState({donationAmounts: temp})
    }
  }

  handleBackgroundImageUpload(event) {
    if (!event.target.files[0]) {
      return
    }
    this.setState({backgroundImage: URL.createObjectURL(event.target.files[0]), backgroundImageData: event.target})
  }

  handleLogoImageUpload(event) {
    let that = this;
    this.cropLogo(event, that);
  }

  cropFetchedLogo(logo, that){
    let img = new Image();
    img.src = logo;
    img.onload = function() {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      canvas.width = 160;
      canvas.height = 160;
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      let url = canvas.toDataURL('image/jpeg', 1);
      that.setState({logoImage: url});
    }
  }

  cropLogo(event, that){
    if (event.target.files && event.target.files[0]) {
      var filerdr = new FileReader();

      filerdr.onload = function(e) {
        var img160 = new Image();
        var img480 = new Image();

      img480.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = 480;
        canvas.height = 480;
        ctx.drawImage(img480, 0, 0, canvas.width, canvas.height);
        canvas.toBlob(function(blob){
          let file = {};
          file["files"] = [blob]
          that.setState({logoImageData: file});
        });
      }

      img160.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = 160;
        canvas.height = 160;
        ctx.drawImage(img160, 0, 0, canvas.width, canvas.height);
        let url = canvas.toDataURL('image/jpeg', 1);
        that.setState({logoImage: url});
      }

      img160.src = e.target.result;
      img480.src = e.target.result;
    }
    filerdr.readAsDataURL(event.target.files[0]);
  }
  }

  handleSave(event) {
    let that = this
    let id = document.getElementById("publisher_id").value;
    let url = '/publishers/' + id + "/site_banners";
    let body = new FormData();

    body.append('title', this.state.title);
    body.append('description', this.state.description);
    body.append('donation_amounts', JSON.stringify(this.state.donationAmounts));
    body.append('social_links', JSON.stringify({youtube: this.state.youtube, twitter: this.state.twitter, twitch: this.state.twitch}));

    fetch(url, {
      method: 'POST',
      headers: {<commit_msg>Use image/jpg instead of image/jpeg<commit_after>import React from 'react'

import BatsBackground from '../../assets/images/bg_bats.svg'
import HeartsBackground from '../../assets/images/bg_hearts.svg'
import { BatColorIcon, YoutubeColorIcon, TwitterColorIcon, TwitchColorIcon } from 'brave-ui/components/icons'
import Checkbox from 'brave-ui/components/formControls/checkbox'

import {styles} from '../packs/brave_rewards_banner.style.jsx'

export default class BraveRewardsBanner extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      title: 'Your title',
      description: 'Welcome to Brave Rewards banner',
      backgroundImage: null,
      backgroundImageData: '',
      logoImage: null,
      logoImageData: '',
      youtube: '',
      twitter: '',
      twitch: '',
      conversionRate: 0.2,
      donationAmounts: [1, 5, 10],
      mode: 'Edit',
      width: '1320'
    }
     this.handleBackgroundImageUpload = this.handleBackgroundImageUpload.bind(this);
     this.handleLogoImageUpload = this.handleLogoImageUpload.bind(this);
     this.updateTitle = this.updateTitle.bind(this);
     this.updateDescription = this.updateDescription.bind(this)
     this.handleSave = this.handleSave.bind(this);
     this.fetchSiteBanner = this.fetchSiteBanner.bind(this);
     this.updateYoutube = this.updateYoutube.bind(this);
     this.updateTwitter = this.updateTwitter.bind(this);
     this.updateTwitch = this.updateTwitch.bind(this);
     this.fetchSiteBanner = this.fetchSiteBanner.bind(this);
     this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
  }

  componentWillMount(){
    this.modalize();
  }

  componentDidMount(){
    this.fetchSiteBanner();
    document.getElementsByClassName('brave-rewards-banner-control-bar-save-button')[0].addEventListener("click", this.handleSave);
    window.addEventListener('resize', this.updateWindowDimensions);
  }

  updateWindowDimensions() {
    if(window.innerWidth < 991){
      this.close();
    }
    else{
      this.setState({ width: 1320});
    }
}

  modalize(){
    document.getElementsByClassName("modal-panel")[0].style.maxWidth = 'none';
    document.getElementsByClassName("modal-panel")[0].style.padding = '0px';
    document.getElementsByClassName("modal-panel--content")[0].style.padding = '0px';
  }

  close(){
    document.getElementsByClassName("modal-panel")[0].style.maxWidth = '40rem';
    document.getElementsByClassName("modal-panel")[0].style.padding = '2rem 2rem';
    document.getElementsByClassName("modal-panel--content")[0].style.padding = '1rem 1rem 0 1rem';
    document.getElementsByClassName("modal-panel--close js-deny")[0].click();
  }

  fetchSiteBanner(){
    let that = this
    let id = document.getElementById("publisher_id").value;
    let url = '/publishers/' + id + "/site_banners/fetch";

    fetch(url, {
      method: 'GET',
      headers: {
        'Accept': 'text/html',
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-Token': document.head.querySelector("[name=csrf-token]").content
        },
        credentials: "same-origin",
        }).then(function(response) {
          return response.json();
        })
        .then(function(banner) {
          that.setState({
            title: banner.title,
            description: banner.description,
            backgroundImage: banner.backgroundImage,
            youtube: banner.socialLinks.youtube,
            twitter: banner.socialLinks.twitter,
            twitch: banner.socialLinks.twitch,
            donationAmounts: banner.donationAmounts,
          })

          that.cropFetchedLogo(banner.logoImage, that);
        });
  }

  updateTitle(event){
     this.setState({title: event.target.value})
  }

  updateDescription(event){
     this.setState({description: event.target.value})
  }

  updateYoutube(event){
     this.setState({youtube: event.target.value})
  }

  updateTwitter(event){
     this.setState({twitter: event.target.value})
  }

  updateTwitch(event){
     this.setState({twitch: event.target.value})
  }

  updateDonationAmounts(event, index){
    let temp = this.state.donationAmounts
    if(/^(\s*|\d+)$/.test(event.target.value)){
      temp[index] = event.target.value
      this.setState({donationAmounts: temp})
    }
  }

  handleBackgroundImageUpload(event) {
    if (!event.target.files[0]) {
      return
    }
    this.setState({backgroundImage: URL.createObjectURL(event.target.files[0]), backgroundImageData: event.target})
  }

  handleLogoImageUpload(event) {
    let that = this;
    this.cropLogo(event, that);
  }

  cropFetchedLogo(logo, that){
    let img = new Image();
    img.src = logo;
    img.onload = function() {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      canvas.width = 160;
      canvas.height = 160;
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      let url = canvas.toDataURL('image/jpg', 1);
      that.setState({logoImage: url});
    }
  }

  cropLogo(event, that){
    if (event.target.files && event.target.files[0]) {
      var filerdr = new FileReader();

      filerdr.onload = function(e) {
        var img160 = new Image();
        var img480 = new Image();

      img480.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = 480;
        canvas.height = 480;
        ctx.drawImage(img480, 0, 0, canvas.width, canvas.height);
        canvas.toBlob(function(blob){
          let file = {};
          file["files"] = [blob]
          that.setState({logoImageData: file});
        });
      }

      img160.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = 160;
        canvas.height = 160;
        ctx.drawImage(img160, 0, 0, canvas.width, canvas.height);
        let url = canvas.toDataURL('image/jpg', 1);
        that.setState({logoImage: url});
      }

      img160.src = e.target.result;
      img480.src = e.target.result;
    }
    filerdr.readAsDataURL(event.target.files[0]);
  }
  }

  handleSave(event) {
    let that = this
    let id = document.getElementById("publisher_id").value;
    let url = '/publishers/' + id + "/site_banners";
    let body = new FormData();

    body.append('title', this.state.title);
    body.append('description', this.state.description);
    body.append('donation_amounts', JSON.stringify(this.state.donationAmounts));
    body.append('social_links', JSON.stringify({youtube: this.state.youtube, twitter: this.state.twitter, twitch: this.state.twitch}));

    fetch(url, {
      method: 'POST',
      headers: {
{'fraction_non_alphanumeric': 0.14294249439880508, 'fraction_numerical': 0.013741598207617625, 'mean_word_length': 3.0419559311801994, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 3, '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': '4814262', 'n_tokens_mistral': 4272, 'n_tokens_neox': 4092, 'n_words': 686}