import React, { Component } from 'react';
import { withTranslation } from 'react-i18next';
import {
  Badge,
  Tooltip,
  ListItemAvatar,
  Avatar,
  Paper,
  Grid,
  IconButton,
  Select,
  MenuItem,
  ListItemText,
  ListItem,
  ListItemIcon,
  ListItemButton,
} from '@mui/material';
import MediaQuery from 'react-responsive';
import Flags from 'country-flag-icons/react/3x2';
import { Link as LinkRouter } from 'react-router-dom';
import { apiClient } from '../services/api';

// Icons
import BarChartIcon from '@mui/icons-material/BarChart';
import PeopleIcon from '@mui/icons-material/People';
import InventoryIcon from '@mui/icons-material/Inventory';
import SellIcon from '@mui/icons-material/Sell';
import SmartToyIcon from '@mui/icons-material/SmartToy';
import PercentIcon from '@mui/icons-material/Percent';
import PriceChangeIcon from '@mui/icons-material/PriceChange';

// Missing flags
import { CataloniaFlag, BasqueCountryFlag } from './Icons';

import { CommunityDialog, ExchangeSummaryDialog, ProfileDialog, StatsDialog } from './Dialogs';

import { getCookie } from '../utils/cookies';

class BottomBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      openStatsForNerds: false,
      openCommuniy: false,
      openExchangeSummary: false,
      openClaimRewards: false,
      num_public_buy_orders: 0,
      num_public_sell_orders: 0,
      book_liquidity: 0,
      active_robots_today: 0,
      maker_fee: 0,
      taker_fee: 0,
      last_day_nonkyc_btc_premium: 0,
      last_day_volume: 0,
      lifetime_volume: 0,
      robosats_running_commit_hash: '000000000000000',
      openProfile: false,
      profileShown: false,
      alternative_site: 'robosats...',
      node_id: '00000000',
      showRewards: false,
      rewardInvoice: null,
      badInvoice: false,
      showRewardsSpinner: false,
      withdrawn: false,
    };
  }

  componentDidMount() {
    this.getInfo();
  }

  getInfo() {
    this.setState(null);
    apiClient.get('/api/info/')
      .then(
        (data) =>
          this.setState(data) &
          this.props.setAppState({
            nickname: data.nickname,
            loading: false,
            activeOrderId: data.active_order_id ? data.active_order_id : null,
            lastOrderId: data.last_order_id ? data.last_order_id : null,
            referralCode: data.referral_code,
            tgEnabled: data.tg_enabled,
            tgBotName: data.tg_bot_name,
            tgToken: data.tg_token,
            earnedRewards: data.earned_rewards,
            lastDayPremium: data.last_day_nonkyc_btc_premium,
          }),
      );
  }

  handleClickOpenStatsForNerds = () => {
    this.setState({ openStatsForNerds: true });
  };

  handleClickCloseStatsForNerds = () => {
    this.setState({ openStatsForNerds: false });
  };

  handleClickOpenCommunity = () => {
    this.setState({ openCommuniy: true });
  };

  handleClickCloseCommunity = () => {
    this.setState({ openCommuniy: false });
  };

  handleClickOpenProfile = () => {
    this.getInfo();
    this.setState({ openProfile: true, profileShown: true });
  };

  handleClickCloseProfile = () => {
    this.setState({ openProfile: false });
  };

  handleSubmitInvoiceClicked = (e, rewardInvoice) => {
    this.setState({
      badInvoice: false,
      showRewardsSpinner: true,
    });

    apiClient.post('/api/reward/', {
      invoice: rewardInvoice,
    }).then(
        (data) =>
          this.setState({
            badInvoice: data.bad_invoice,
            openClaimRewards: !data.successful_withdrawal,
            withdrawn: !!data.successful_withdrawal,
            showRewardsSpinner: false,
          }) &
          this.props.setAppState({
            earnedRewards: data.successful_withdrawal ? 0 : this.props.earnedRewards,
          }),
      );
    e.preventDefault();
  };

  handleSetStealthInvoice = (wantsStealth) => {
    apiClient.put('/api/stealth/', { wantsStealth })
      .then((data) => this.props.setAppState({ stealthInvoices: data.wantsStealth }));
  };

  getHost() {
    const url =
      window.location != window.parent.location
        ? this.getHost(document.referrer)
        : document.location.href;
    return url.split('/')[2];
  }

  showProfileButton = () => {
    return (
      this.props.avatarLoaded &&
      (this.props.token ? getCookie('robot_token') == this.props.token : true) &&
      getCookie('sessionid')
    );
  };

  bottomBarDesktop = () => {
    const { t } = this.props;
    const hasRewards = this.props.earnedRewards > 0;
    const hasOrder = !!(
      (this.props.activeOrderId > 0) &
      !this.state.profileShown &
      this.props.avatarLoaded
    );
    const fontSize = this.props.theme.typography.fontSize;
    const fontSizeFactor = fontSize / 14; // default fontSize is 14
    const typographyProps = {
      primaryTypographyProps: { fontSize },
      secondaryTypographyProps: { fontSize: (fontSize * 12) / 14 },
    };
    return (
      <Paper elevation={6} style={{ height: 40 * fontSizeFactor, width: window.innerWidth }}>
        <Grid container>
          <Grid item xs={1.9}>
            <div style={{ display: this.showProfileButton() ? '' : 'none' }}>
              <ListItemButton onClick={this.handleClickOpenProfile}>
                <Tooltip
                  open={(hasRewards || hasOrder) && this.showProfileButton()}
                  title={
                    (hasRewards ? t('You can claim satoshis!') + ' ' : '') +
                    (hasOrder ? t('You have an active order') : '')
                  }
                >
                  <ListItemAvatar sx={{ width: 30 * fontSizeFactor, height: 30 * fontSizeFactor }}>
                    <Badge
                      badgeContent={
                        (this.props.activeOrderId > 0) & !this.props.profileShown ? '' : null
                      }
                      color='primary'
                    >
                      <Avatar
                        className='flippedSmallAvatar'
                        sx={{ margin: 0, top: -13 }}
                        alt={this.props.nickname}
                        imgProps={{
                          onLoad: () => this.props.setAppState({ avatarLoaded: true }),
                        }}
                        src={
                          this.props.nickname
                            ? window.location.origin +
                              '/static/assets/avatars/' +
                              this.props.nickname +
                              '.png'
                            : null
                        }
                      />
                    </Badge>
                  </ListItemAvatar>
                </Tooltip>
                <ListItemText primary={this.props.nickname} />
              </ListItemButton>
            </div>
          </Grid>

          <Grid item xs={1.9}>
            <ListItem className='bottomItem'>
              <ListItemIcon size='small'>
                <IconButton
                  disabled={!this.showProfileButton()}
                  color='primary'
                  onClick={() =>
                    this.props.setAppState({ buyChecked: false, sellChecked: true, type: 0 }) &
                    this.getInfo()
                  }
                  to={`/book/`}
                  component={LinkRouter}
                >
                  <InventoryIcon />
                </IconButton>
              </ListItemIcon>
              <ListItemText
                {...typographyProps}
                primary={this.state.num_public_buy_orders}
                secondary={t('Public Buy Orders')}
              />
            </ListItem>
          </Grid>

          <Grid item xs={1.9}>
            <ListItem className='bottomItem'>
              <ListItemIcon size='small'>
                <IconButton
                  disabled={!this.showProfileButton()}
                  color='primary'
                  onClick={() =>
                    this.props.setAppState({ buyChecked: true, sellChecked: false, type: 1 }) &
                    this.getInfo()
                  }
                  to={`/book/`}
                  component={LinkRouter}
                >
                  <SellIcon />
                </IconButton>
              </ListItemIcon>
              <ListItemText
                {...typographyProps}
                primary={this.state.num_public_sell_orders}
                secondary={t('Public Sell Orders')}
              />
            </ListItem>
          </Grid>

          <Grid item xs={1.9}>
            <ListItem className='bottomItem'>
              <ListItemIcon size='small'>
                <IconButton
                  disabled={!this.showProfileButton()}
                  color='primary'
                  onClick={() => this.getInfo()}
                  to={`/`}
                  component={LinkRouter}
                >
                  <SmartToyIcon />
                </IconButton>
              </ListItemIcon>
              <ListItemText
                {...typographyProps}
                primary={this.state.active_robots_today}
                secondary={t('Today Active Robots')}
              />
            </ListItem>
          </Grid>

          <Grid item xs={1.9}>
            <ListItem className='bottomItem'>
              <ListItemIcon size='small'>
                <IconButton color='primary' onClick={this.handleClickOpenExchangeSummary}>
                  <PriceChangeIcon />
                </IconButton>
              </ListItemIcon>
              <ListItemText
                {...typographyProps}
                primary={this.state.last_day_nonkyc_btc_premium + '%'}
                secondary={t('24h Avg Premium')}
              />
            </ListItem>
          </Grid>

          <Grid item xs={1.5}>
            <ListItem className='bottomItem'>
              <ListItemIcon size='small'>
                <IconButton color='primary' onClick={this.handleClickOpenExchangeSummary}>
                  <PercentIcon />
                </IconButton>
              </ListItemIcon>
              <ListItemText
                {...typographyProps}
                primary={(this.state.maker_fee + this.state.taker_fee) * 100}
                secondary={t('Trade Fee')}
              />
            </ListItem>
          </Grid>

          <Grid container item xs={1}>
            <Grid item xs={6}>
              {this.LangSelect()}
            </Grid>
            <Grid item xs={3}>
              <Tooltip enterTouchDelay={250} title={t('Show community and support links')}>
                <IconButton
                  color='primary'
                  aria-label='Community'
                  onClick={this.handleClickOpenCommunity}
                >
                  <PeopleIcon />
                </IconButton>
              </Tooltip>
            </Grid>
            <Grid item xs={3}>
              <Tooltip enterTouchDelay={250} title={t('Show stats for nerds')}>
                <IconButton
                  color='primary'
                  aria-label='Stats for Nerds'
                  onClick={this.handleClickOpenStatsForNerds}
                >
                  <BarChartIcon />
                </IconButton>
              </Tooltip>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    );
  };

  handleChangeLang = (e) => {
    const { i18n } = this.props;
    i18n.changeLanguage(e.target.value);
  };

  LangSelect = () => {
    const { i18n } = this.props;
    const lang = i18n.resolvedLanguage == null ? 'en' : i18n.resolvedLanguage.substring(0, 2);
    const flagProps = {
      width: 20,
      height: 20,
    };

    return (
      <Select
        size='small'
        value={lang}
        inputProps={{
          style: { textAlign: 'center' },
        }}
        renderValue={(value) => value.toUpperCase()}
        onChange={this.handleChangeLang}
      >
        <MenuItem value={'en'}>
          <div style={{ width: 24, position: 'relative', top: 3 }}>
            <Flags.US {...flagProps} />
          </div>
          EN
        </MenuItem>
        <MenuItem value={'es'}>
          <div style={{ width: 24, position: 'relative', top: 3 }}>
            <Flags.ES {...flagProps} />
          </div>
          ES
        </MenuItem>
        <MenuItem value={'de'}>
          <div style={{ width: 24, position: 'relative', top: 3 }}>
            <Flags.DE {...flagProps} />
          </div>
          DE
        </MenuItem>
        <MenuItem value={'pl'}>
          <div style={{ width: 24, position: 'relative', top: 3 }}>
            <Flags.PL {...flagProps} />
          </div>
          PL
        </MenuItem>
        <MenuItem value={'fr'}>
          <div style={{ width: 24, position: 'relative', top: 3 }}>
            <Flags.FR {...flagProps} />
          </div>
          FR
        </MenuItem>
        <MenuItem value={'ru'}>
          <div style={{ width: 24, position: 'relative', top: 3 }}>
            <Flags.RU {...flagProps} />
          </div>
          RU
        </MenuItem>
        <MenuItem value={'it'}>
          <div style={{ width: 24, position: 'relative', top: 3 }}>
            <Flags.IT {...flagProps} />
          </div>
          IT
        </MenuItem>
        <MenuItem value={'pt'}>
          <div style={{ width: 24, position: 'relative', top: 3 }}>
            <Flags.BR {...flagProps} />
          </div>
          PT
        </MenuItem>
        <MenuItem disabled={true} value={'zh'}>
          <div style={{ width: 24, position: 'relative', top: 3 }}>
            <Flags.CN {...flagProps} />
          </div>
          ZH
        </MenuItem>
        <MenuItem value={'sv'}>
          <div style={{ width: 24, position: 'relative', top: 3 }}>
            <Flags.SE {...flagProps} />
          </div>
          SV
        </MenuItem>
        <MenuItem value={'cs'}>
          <div style={{ width: 24, position: 'relative', top: 3 }}>
            <Flags.CZ {...flagProps} />
          </div>
          CS
        </MenuItem>
        <MenuItem value={'th'}>
          <div style={{ width: 24, position: 'relative', top: 3 }}>
            <Flags.TH {...flagProps} />
          </div>
          TH
        </MenuItem>
        <MenuItem value={'ca'}>
          <div style={{ width: 24, position: 'relative', top: 3 }}>
            <CataloniaFlag {...flagProps} />
          </div>
          CA
        </MenuItem>
        <MenuItem value={'eu'}>
          <div style={{ width: 24, position: 'relative', top: 3 }}>
            <BasqueCountryFlag {...flagProps} />
          </div>
          EU
        </MenuItem>
      </Select>
    );
  };

  handleClickOpenExchangeSummary = () => {
    // avoid calling getInfo while sessionid not yet set. Temporary fix.
    if (getCookie('sessionid')) {
      this.getInfo();
    }
    this.setState({ openExchangeSummary: true });
  };

  handleClickCloseExchangeSummary = () => {
    this.setState({ openExchangeSummary: false });
  };

  bottomBarPhone = () => {
    const { t } = this.props;
    const hasRewards = this.props.earnedRewards > 0;
    const hasOrder = !!(
      (this.state.active_order_id > 0) &
      !this.state.profileShown &
      this.props.avatarLoaded
    );
    return (
      <Paper elevation={6} style={{ height: 40 }}>
        <Grid container>
          <Grid item xs={1.6}>
            <div style={{ display: this.showProfileButton() ? '' : 'none' }}>
              <Tooltip
                open={(hasRewards || hasOrder) && this.showProfileButton()}
                title={
                  (hasRewards ? t('You can claim satoshis!') + ' ' : '') +
                  (hasOrder ? t('You have an active order') : '')
                }
              >
                <IconButton
                  onClick={this.handleClickOpenProfile}
                  sx={{ margin: 0, bottom: 17, right: 8 }}
                >
                  <Badge
                    badgeContent={
                      (this.state.active_order_id > 0) & !this.state.profileShown ? '' : null
                    }
                    color='primary'
                  >
                    <Avatar
                      className='phoneFlippedSmallAvatar'
                      sx={{ width: 55, height: 55 }}
                      alt={this.props.nickname}
                      imgProps={{
                        onLoad: () => this.props.setAppState({ avatarLoaded: true }),
                      }}
                      src={
                        this.props.nickname
                          ? window.location.origin +
                            '/static/assets/avatars/' +
                            this.props.nickname +
                            '.png'
                          : null
                      }
                    />
                  </Badge>
                </IconButton>
              </Tooltip>
            </div>
          </Grid>

          <Grid item xs={1.6} align='center'>
            <Tooltip enterTouchDelay={300} title={t('Number of public BUY orders')}>
              <IconButton
                disabled={!this.showProfileButton()}
                color='primary'
                onClick={() =>
                  this.props.setAppState({ buyChecked: false, sellChecked: true, type: 0 }) &
                  this.getInfo()
                }
                to={`/book/`}
                component={LinkRouter}
              >
                <Badge badgeContent={this.state.num_public_buy_orders} color='action'>
                  <InventoryIcon />
                </Badge>
              </IconButton>
            </Tooltip>
          </Grid>

          <Grid item xs={1.6} align='center'>
            <Tooltip enterTouchDelay={300} title={t('Number of public SELL orders')}>
              <IconButton
                disabled={!this.showProfileButton()}
                color='primary'
                onClick={() =>
                  this.props.setAppState({ buyChecked: true, sellChecked: false, type: 1 }) &
                  this.getInfo()
                }
                to={`/book/`}
                component={LinkRouter}
              >
                <Badge badgeContent={this.state.num_public_sell_orders} color='action'>
                  <SellIcon />
                </Badge>
              </IconButton>
            </Tooltip>
          </Grid>

          <Grid item xs={1.6} align='center'>
            <Tooltip enterTouchDelay={300} title={t('Today active robots')}>
              <IconButton
                disabled={!this.showProfileButton()}
                color='primary'
                onClick={() => this.getInfo()}
                to={`/`}
                component={LinkRouter}
              >
                <Badge badgeContent={this.state.active_robots_today} color='action'>
                  <SmartToyIcon />
                </Badge>
              </IconButton>
            </Tooltip>
          </Grid>

          <Grid item xs={1.8} align='center'>
            <Tooltip enterTouchDelay={300} title={t('24h non-KYC bitcoin premium')}>
              <IconButton color='primary' onClick={this.handleClickOpenExchangeSummary}>
                <Badge badgeContent={this.state.last_day_nonkyc_btc_premium + '%'} color='action'>
                  <PriceChangeIcon />
                </Badge>
              </IconButton>
            </Tooltip>
          </Grid>

          <Grid container item xs={3.8}>
            <Grid item xs={6}>
              {this.LangSelect()}
            </Grid>
            <Grid item xs={3}>
              <Tooltip enterTouchDelay={250} title={t('Show community and support links')}>
                <IconButton
                  color='primary'
                  aria-label='Community'
                  onClick={this.handleClickOpenCommunity}
                >
                  <PeopleIcon />
                </IconButton>
              </Tooltip>
            </Grid>
            <Grid item xs={3}>
              <Tooltip enterTouchDelay={250} title={t('Show stats for nerds')}>
                <IconButton
                  color='primary'
                  aria-label='Stats for Nerds'
                  onClick={this.handleClickOpenStatsForNerds}
                >
                  <BarChartIcon />
                </IconButton>
              </Tooltip>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    );
  };

  render() {
    return (
      <div>
        <CommunityDialog
          isOpen={this.state.openCommuniy}
          handleClickCloseCommunity={this.handleClickCloseCommunity}
        />

        <ExchangeSummaryDialog
          isOpen={this.state.openExchangeSummary}
          handleClickCloseExchangeSummary={this.handleClickCloseExchangeSummary}
          numPublicBuyOrders={this.state.num_public_buy_orders}
          numPublicSellOrders={this.state.num_public_sell_orders}
          bookLiquidity={this.state.book_liquidity}
          activeRobotsToday={this.state.active_robots_today}
          lastDayNonkycBtcPremium={this.state.last_day_nonkyc_btc_premium}
          makerFee={this.state.maker_fee}
          takerFee={this.state.taker_fee}
          swapFeeRate={this.state.current_swap_fee_rate}
        />

        <ProfileDialog
          isOpen={this.state.openProfile}
          handleClickCloseProfile={this.handleClickCloseProfile}
          nickname={this.props.nickname}
          activeOrderId={this.props.activeOrderId}
          lastOrderId={this.props.lastOrderId}
          referralCode={this.props.referralCode}
          tgEnabled={this.props.tgEnabled}
          tgBotName={this.props.tgBotName}
          tgToken={this.props.tgToken}
          handleSubmitInvoiceClicked={this.handleSubmitInvoiceClicked}
          host={this.getHost()}
          showRewardsSpinner={this.state.showRewardsSpinner}
          withdrawn={this.state.withdrawn}
          badInvoice={this.state.badInvoice}
          earnedRewards={this.props.earnedRewards}
          setAppState={this.props.setAppState}
          stealthInvoices={this.props.stealthInvoices}
          handleSetStealthInvoice={this.handleSetStealthInvoice}
        />

        <StatsDialog
          isOpen={this.state.openStatsForNerds}
          handleClickCloseStatsForNerds={this.handleClickCloseStatsForNerds}
          lndVersion={this.state.lnd_version}
          network={this.state.network}
          nodeAlias={this.state.node_alias}
          nodeId={this.state.node_id}
          alternativeName={this.state.alternative_name}
          alternativeSite={this.state.alternative_site}
          robosatsRunningCommitHash={this.state.robosats_running_commit_hash}
          lastDayVolume={this.state.last_day_volume}
          lifetimeVolume={this.state.lifetime_volume}
        />

        <MediaQuery minWidth={1200}>{this.bottomBarDesktop()}</MediaQuery>

        <MediaQuery maxWidth={1199}>{this.bottomBarPhone()}</MediaQuery>
      </div>
    );
  }
}

export default withTranslation()(BottomBar);