import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
import { useStores } from '../../src/store'
import { useObserver } from 'mobx-react-lite'
import SearchIcon from '@material-ui/icons/Search';
import theme from '../theme'
import FlashOnButton from '@material-ui/icons/FlashOn';
import Tooltip from '@material-ui/core/Tooltip';
import CircularProgress from '@material-ui/core/CircularProgress';
import CachedButton from '@material-ui/icons/Cached';
import ArrowBackIosButton from '@material-ui/icons/ArrowBackIos';
import ArrowForwardIosButton from '@material-ui/icons/ArrowForwardIos';
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import EE, {RESET_IP, RESET_IP_FINISHED} from '../utils/ee'
import { urlBase64FromAscii } from '../../src/store/utils/ldat';
import Button from '../utils/button'
import {whiteBitcoinIcon} from '../images'
import * as rsa from '../crypto/rsa'

async function createPrivateKeyIfNotExists(contacts, user) {

  const priv = await rsa.getPrivateKey()
  const me = contacts.contacts.find(c=> c.is_owner)
  // private key has been made
  if (priv) {
    // set into user.contactKey
    if(me && me.contact_key) {
      if(!user.contactKey) {
        user.setContactKey(me.contact_key)
      }
    } else if(user.contactKey) {
      // contacts.updateContact(user.myid, {
      //   contact_key: user.contactKey
      // })
      // showToast('updated me.contact_key')
    } else {
      // need to regen :(
      const contactKey = await rsa.genKeys()
      user.setContactKey(contactKey)
      contacts.updateContact(me.id, {
        contact_key: contactKey
      })
    }
  // no private key!! 
  } else {
    const contactKey = await rsa.genKeys()
    user.setContactKey(contactKey)
    contacts.updateContact(me.id, {
      contact_key: contactKey
    })
  } 
}

export default function Head({ setWidth, width }) {
  const { contacts, details, msg, ui, chats, user } = useStores()
  const [refreshing, setRefreshing] = useState(false)
  // const [snap, setSnap] = useState(false) =
  const snap = width < 250

  async function refresh(forceMore?:boolean) {
    setRefreshing(true)
    const conts = await contacts.getContacts()
    createPrivateKeyIfNotExists(contacts, user)

    await Promise.all([
      details.getBalance(),
      msg.getMessages(forceMore?true:false),
      // chats.getChats(),
    ])
    setRefreshing(false)
  }

  function startResetIP(){
    setRefreshing(true)
  }

  useEffect(()=>{
    refresh()
    
    EE.on(RESET_IP, startResetIP)
    EE.on(RESET_IP_FINISHED, refresh)
    return ()=>{
      EE.removeListener(RESET_IP, startResetIP)
      EE.removeListener(RESET_IP_FINISHED, refresh)
    }
  },[])

  function setWidthHandler(width: number) {
    setWidth(width)
  }

  return useObserver(() => <Wrap>
    {snap ? <div></div> :
      <Top style={{ overflow: 'hidden' }}>
        <Tooltip title="Refresh" placement="right">
          <CachedButton style={{ cursor: 'pointer', marginLeft: 20, marginRight: 20 }} onClick={() => refresh(true)} >
          </CachedButton>
        </Tooltip>
        <div></div>
        <Balance>
          {details.balance}
          <span>sat</span>
        </Balance>
        <div></div>
        <div 
        onClick={() => ui.setOnchain(true)}
        style={{cursor: 'pointer', height: 20, width: 40, borderRadius: 20, backgroundColor: theme.primary, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around'}}>
          <p style={{marginLeft: 5}}>+</p><img src={whiteBitcoinIcon} style={{height: 15, width: 15}}/>
        </div>
        <Tooltip title={ui.connected ? 'Connected' : 'Not Connected'} placement="left">
          {refreshing ?
            <CircularProgress size={18} style={{ marginRight: 20, marginLeft: -20, color: 'white' }} /> :
            <FlashOnButton style={{
              marginRight: 20, marginLeft: -20, height: 20,
              color: ui.connected ? '#49ca97' : '#febd59'
            }} />
          }
        </Tooltip>
      </Top>}
    {snap ? <div></div> :
      <Searcher>
        <SearchIcon style={{ color: 'grey', fontSize: 18, position: 'absolute', top: 12, left: 19 }} />
        <Search placeholder="Search" value={ui.searchTerm}
          onChange={e => ui.setSearchTerm(e.target.value)}
          style={{ background: theme.deep, marginRight: 5 }}
        />
        <PersonAddIcon onClick={()=>ui.setNewContact({})} style={{color: '#8e9da9', position: 'absolute', right: '24px', marginTop: '9px', cursor: 'pointer'}}/>
        <ArrowBackIosButton onClick={() => setWidthHandler(11)}
          style={{
            fontWeight: 'bold', color: '#618af8', fontSize: 'medium', cursor: 'pointer',
            position: 'absolute', right: '0px', marginTop: 13
          }}>
        </ArrowBackIosButton>
      </Searcher>}
    {snap ?
      <ArrowForwardIosButton onClick={() => setWidthHandler(350)}
        style={{
          cursor: 'pointer', borderTopRightRadius: '5px', borderBottomRightRadius: '5px', backgroundColor: '#618af8',
          position: 'absolute', right: '-26px', top: '73px', paddingTop: 5, paddingBottom: 5, width: 16
        }} />
      : <div></div>}
  </Wrap>)
}

const Wrap = styled.div`
  width:100%;
  height:115px;
  max-height:114px;
  display:flex;
  flex-direction:column;
  box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.55);
  position:relative;
  z-index:11;
`
const Top = styled.div`
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  height:65px;
`
const Balance = styled.div`
  width:100px;
  font-size:17px;
  & span {
    color:grey;
    margin-left:10px;
  }
`
const Searcher = styled.div`
  width:100%;
  position:relative;
  display: flex;
`
const Search = styled.input`
  width: calc(100% - 65px);
  height:42px;
  border:none;
  outline:none;
  border-radius:32px;
  font-size:14px;
  padding-left:42px;
  padding-right:48px;
  color:grey;
  margin-left:8px;
`