import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
  AppBar,
  Toolbar,
  IconButton,
  Typography,
  Box,
  Paper,
  Button,
  Tooltip,
} from '@material-ui/core';
import { KeyboardBackspace, BluetoothSearching } from '@material-ui/icons';
import { useHistory } from 'react-router-dom';
import { showNav } from '../../../../redux/actions/CommonActions';
import styles from './BluetoothPage.module.scss';
import logo from '../../../../logo-header.png';

export default function BluetoothPage() {
  let history = useHistory();
  const dispatch = useDispatch();
  const unique_id = useSelector((state) => state.MyActivities.user.unique_id);
  const [showTooltip, setShowTooltip] = useState(false);

  const handleCodeClick = () => {
    setShowTooltip(true);
    navigator.clipboard.writeText(`person:${unique_id}`);
    setTimeout(() => {
      setShowTooltip(false);
    }, 2000);
  };

  return (
    <>
      <AppBar position="static" className="activity-header">
        <Toolbar>
          <img alt="mask" src={logo} className="app-header-logo" />
          <IconButton
            color="inherit"
            onClick={() => {
              dispatch(showNav());
              history.push('/my-activities');
            }}
          >
            <KeyboardBackspace />
          </IconButton>
        </Toolbar>
      </AppBar>
      <Box className={styles['bt-box']}>
        <div className={styles['bt-box-body']}>
          <BluetoothSearching style={{ fontSize: 150, color: '#ff005c' }} />
          <Paper elevation={0} className={styles['uid-paper']}>
            <span>{'کد شخصی شما'}</span>
            <Tooltip
              PopperProps={{
                disablePortal: true,
              }}
              onClose={() => setShowTooltip(false)}
              open={showTooltip}
              disableFocusListener
              disableHoverListener
              disableTouchListener
              title="کپی شد!"
              placement="top"
            >
              <Button className={styles['uid-btn']} onClick={handleCodeClick}>
                {`person:${unique_id}`}
              </Button>
            </Tooltip>
          </Paper>
        </div>
      </Box>
      <Box className="warning-box">
        <Typography>
          برای ثبت ملاقات توسط افراد نزدیک به شما توسط بلوتوث، کد بالا را در نام
          بلوتوث دستگاه خود قرار دهید.
        </Typography>
        <Typography component="span" variant="caption">
          این کد حاوی هیچ گونه اطلاعات شخصی یا درمانی شما نیست و تنها جهت
          شناسایی شما در نرم‌افزار استفاده می‌شود.
        </Typography>
      </Box>
    </>
  );
}