import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';

import Icon from '../../base/icons/components/Icon';
import { IconTrash } from '../../base/icons/svg';
import Button from '../../base/ui/components/web/Button';
import { BUTTON_TYPES } from '../../base/ui/constants.any';
import { closeHidDevice, requestHidDevice } from '../../web-hid/actions';
import { getDeviceInfo, shouldRequestHIDDevice } from '../../web-hid/functions';

const useStyles = makeStyles()(() => {
    return {
        callControlContainer: {
            marginTop: '8px',
            marginBottom: '16px',
            fontSize: '14px',
            '> label': {
                display: 'block',
                marginBottom: '20px'
            }
        },
        deviceRow: {
            display: 'flex',
            justifyContent: 'space-between'
        },
        deleteDevice: {
            cursor: 'pointer',
            textAlign: 'center'
        },
        headerConnectedDevice: {
            fontWeight: 600
        },
        hidContainer: {
            '> span': {
                marginLeft: '16px'
            }
        }
    };
});

/**
 * Device hid container.
 *
 * @param {IProps} props - The props of the component.
 * @returns {ReactElement}
 */
function DeviceHidContainer() {
    const { t } = useTranslation();
    const deviceInfo = useSelector(getDeviceInfo);
    const showRequestDeviceInfo = shouldRequestHIDDevice(deviceInfo);
    const { classes } = useStyles();
    const dispatch = useDispatch();

    const onRequestControl = useCallback(() => {
        dispatch(requestHidDevice());
    }, [ dispatch ]);

    const onDeleteHid = useCallback(() => {
        dispatch(closeHidDevice());
    }, [ dispatch ]);

    return (
        <div
            className = { classes.callControlContainer }
            key = 'callControl'>
            <label
                className = 'device-selector-label'
                htmlFor = 'callControl'>
                {t('deviceSelection.hid.callControl')}
            </label>
            {showRequestDeviceInfo && (
                <Button
                    accessibilityLabel = { t('deviceSelection.hid.pairDevice') }
                    id = 'request-control-btn'
                    key = 'request-control-btn'
                    label = { t('deviceSelection.hid.pairDevice') }
                    onClick = { onRequestControl }
                    size = 'small'
                    type = { BUTTON_TYPES.SECONDARY } />
            )}
            {!showRequestDeviceInfo && (
                <div className = { classes.hidContainer }>
                    <p className = { classes.headerConnectedDevice }>{t('deviceSelection.hid.connectedDevices')}</p>
                    <div className = { classes.deviceRow }>
                        <span>{deviceInfo.device?.productName}</span>
                        <Icon
                            ariaLabel = { t('deviceSelection.hid.deleteDevice') }
                            className = { classes.deleteDevice }
                            onClick = { onDeleteHid }
                            role = 'button'
                            src = { IconTrash }
                            tabIndex = { 0 } />
                    </div>
                </div>
            )}
        </div>
    );
}

export default DeviceHidContainer;
