import { invoke } from '@tauri-apps/api'
import React from 'react'

import Discord from  '../../resources/icons/discord.svg'
import Github from  '../../resources/icons/github.svg'

import './RightBar.css'

const DISCORD = 'https://discord.gg/T5vZU6UyeG'
const GITHUB = 'https://github.com/Grasscutters/Grasscutter'

export default class RightBar extends React.Component {
  openInBrowser(url: string) {
    invoke('open_in_browser', { url })
  }

  render() {
    return (
      <div className="RightBar">
        <div className="RightBarInner">
          <div className="BarDiscord BarImg" onClick={() => this.openInBrowser(DISCORD)}>
            <img src={Discord} />
          </div>
          <div className="BarGithub BarImg" onClick={() => this.openInBrowser(GITHUB)}>
            <img src={Github} />
          </div>
        </div>
      </div>
    )
  }
}