/* eslint-disable react/destructuring-assignment */
import React, { useCallback, useEffect } from 'react';
import { Button, H5, Icon, Text } from '@blueprintjs/core';
import { Row, Col } from 'react-flexbox-grid';

interface SuccessStepProps {
  handleReset: () => void;
}

const SuccessStep: React.FC<SuccessStepProps> = (props: SuccessStepProps) => {
  useEffect(() => {
    document
      .querySelector('#top-panel-connected-devices-list-button')
      ?.classList.remove('pulse-not-infinite');

    document
      .querySelector('#top-panel-connected-devices-list-button')
      ?.classList.add('pulse-not-infinite');

    setTimeout(() => {
      document
        .querySelector('#top-panel-connected-devices-list-button')
        ?.classList.remove('pulse-not-infinite');
    }, 4000);
  }, []);

  const handleTextConnectedListMouseEnter = useCallback(() => {
    document
      .querySelector('#top-panel-connected-devices-list-button')
      ?.classList.add('pulsing');
  }, []);

  const handleTextConnectedListMouseLeave = useCallback(() => {
    document
      .querySelector('#top-panel-connected-devices-list-button')
      ?.classList.remove('pulsing');
  }, []);

  return (
    <Col
      xs={8}
      md={6}
      style={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
      }}
    >
      <Row center="xs">
        <Col xs={12}>
          <Icon icon="endorsed" iconSize={35} color="#0F9960" />
          <H5>Success!</H5>
        </Col>
      </Row>
      <Row center="xs">
        <Col xs={10}>
          <div style={{ marginBottom: '10px' }}>
            <Text>
              {`You should see now sharing session started on device you've connected
      with.`}
            </Text>
          </div>
          <div
            id="connected-devices-list-text-success"
            onMouseEnter={handleTextConnectedListMouseEnter}
            onMouseLeave={handleTextConnectedListMouseLeave}
            style={{
              marginBottom: '25px',
              textDecoration: 'underline dotted',
            }}
          >
            <Text className="">
              {`
              You can manage connected devices by clicking "Connected Devices"
              button in top panel
              `}
            </Text>
          </div>
        </Col>
      </Row>
      <Button
        intent="primary"
        onClick={props.handleReset}
        icon="repeat"
        style={{ borderRadius: '100px' }}
      >
        Connect New Device
      </Button>
    </Col>
  );
};

export default SuccessStep;