// Copyright 2015 Northern.tech AS
//
//    Licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//        http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
import { useCallback, useEffect, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router';

// material ui
import { Delete as DeleteIcon, FilterList as FilterListIcon, Lock, SyncOutlined } from '@mui/icons-material';
import { Button, Typography } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import { ConfirmModal } from '@northern.tech/common-ui/ConfirmModal';
import { defaultTextRender, getDeviceIdentityText } from '@northern.tech/common-ui/DeviceIdentity';
import DocsLink from '@northern.tech/common-ui/DocsLink';
import Loader from '@northern.tech/common-ui/Loader';
import storeActions from '@northern.tech/store/actions';
import {
  ALL_DEVICES,
  DEVICE_FILTERING_OPTIONS,
  DEVICE_STATES,
  SORTING_OPTIONS,
  TIMEOUTS,
  UNGROUPED_GROUP,
  onboardingSteps
} from '@northern.tech/store/constants';
import {
  getAvailableIssueOptionsByType,
  getDeviceCountsByStatus,
  getDeviceFilters,
  getEnabledTiers,
  getFilterAttributes,
  getIdAttribute,
  getLimitMaxed,
  getMappedDevicesList,
  getOnboardingState,
  getSelectedGroupInfo,
  getTestDeviceCount,
  getUserCapabilities,
  getUserSettings,
  getUserSettingsInitialized
} from '@northern.tech/store/selectors';
import { useAppDispatch } from '@northern.tech/store/store';
import {
  advanceOnboarding,
  deleteAuthset,
  getIssueCountsByType,
  saveUserSettings,
  setDeviceListState,
  setTestDeviceStatus,
  updateDevicesAuth,
  updateUserColumnSettings
} from '@northern.tech/store/thunks';
import { Scope } from '@northern.tech/types/MenderTypes';
import { useDebounce } from '@northern.tech/utils/debouncehook';
import { toggle } from '@northern.tech/utils/helpers';
import { useWindowSize } from '@northern.tech/utils/resizehook';
import { clearAllRetryTimers, setRetryTimer } from '@northern.tech/utils/retrytimer';

import { getOnboardingComponentFor } from '../../utils/onboardingManager';
import { defaultHeaders, routes as states } from './BaseDevices';
import DeviceList, { minCellWidth } from './DeviceList';
import ExpandedDevice from './ExpandedDevice';
import ColumnCustomizationDialog from './dialogs/CustomColumnsDialog';
import DeviceQuickActions from './widgets/DeviceQuickActions';
import { DeviceStateSelection } from './widgets/DeviceStateSelection';
import Filters from './widgets/Filters';
import DeviceIssuesSelection from './widgets/IssueSelection';
import ListOptions from './widgets/ListOptions';
import { TestDeviceLimit } from './widgets/TestDeviceLimit';
import { TierSelection } from './widgets/TierSelection';

const { setDeviceFilters, setSnackbar } = storeActions;

const deviceRefreshTimes = {
  [DEVICE_STATES.accepted]: TIMEOUTS.refreshLong,
  [DEVICE_STATES.pending]: TIMEOUTS.refreshDefault,
  [DEVICE_STATES.preauth]: TIMEOUTS.refreshLong,
  [DEVICE_STATES.rejected]: TIMEOUTS.refreshLong,
  default: TIMEOUTS.refreshDefault
};

const idAttributeTitleMap = {
  id: 'Device ID',
  name: 'Name'
};

const headersReducer = (accu, header) => {
  if (header.attribute.scope === accu.column.scope && header.attribute.name === accu.column.name) {
    accu.header = { ...accu.header, ...header };
  }
  return accu;
};

const useStyles = makeStyles()(theme => ({
  filterCommon: {
    borderStyle: 'solid',
    borderWidth: 1,
    borderRadius: theme.shape.borderRadius,
    borderColor: theme.palette.divider,
    marginBottom: 10,
    [`.filter-list > .MuiChip-root > .MuiChip-label`]: {
      whiteSpace: 'normal'
    },
    ['&.filter-wrapper']: {
      padding: `${theme.spacing(3)} ${theme.spacing(2)}`
    }
  },
  selection: {
    fontSize: 13,
    marginLeft: theme.spacing(0.5),
    marginTop: 2
  }
}));

export const getHeaders = (columnSelection = [], currentStateHeaders, idAttribute, openSettingsDialog) => {
  const headers = columnSelection.length
    ? columnSelection.map(column => {
        let header = { ...column, attribute: { ...column }, textRender: defaultTextRender, sortable: true };
        header = Object.values(defaultHeaders).reduce(headersReducer, { column, header }).header;
        header = currentStateHeaders.reduce(headersReducer, { column, header }).header;
        return header;
      })
    : currentStateHeaders;
  const { attribute, scope } = idAttribute;
  return [
    {
      title: idAttributeTitleMap[attribute] ?? attribute,
      customize: openSettingsDialog,
      attribute: { name: attribute, scope },
      sortable: true,
      textRender: getDeviceIdentityText
    },
    ...headers,
    defaultHeaders.deviceStatus
  ];
};

const calculateColumnSelectionSize = (changedColumns, customColumnSizes) =>
  changedColumns.reduce(
    (accu, column) => {
      const size = customColumnSizes.find(({ attribute }) => attribute.name === column.key && attribute.scope === column.scope)?.size || minCellWidth;
      accu.columnSizes.push({ attribute: { name: column.key, scope: column.scope }, size });
      accu.selectedAttributes.push({ attribute: column.key, scope: column.scope });
      return accu;
    },
    { columnSizes: [], selectedAttributes: [] }
  );

const OnboardingComponent = ({ deviceListRef, onboardingState }) => {
  let onboardingComponent = null;
  const element = deviceListRef.current?.querySelector('body .deviceListItem > div');
  if (element) {
    const anchor = { left: 200, top: element.offsetTop + element.offsetHeight };
    onboardingComponent = getOnboardingComponentFor(onboardingSteps.DEVICES_PENDING_ONBOARDING, onboardingState, { anchor }, onboardingComponent);
  } else if (deviceListRef.current) {
    const anchor = { top: deviceListRef.current.offsetTop + deviceListRef.current.offsetHeight / 3, left: deviceListRef.current.offsetWidth / 2 + 30 };
    onboardingComponent = getOnboardingComponentFor(
      onboardingSteps.DEVICES_PENDING_ONBOARDING_START,
      onboardingState,
      { anchor, place: 'top' },
      onboardingComponent
    );
  }
  return onboardingComponent;
};

export const Authorized = ({
  addDevicesToGroup,
  onGroupClick,
  onGroupRemoval,
  onMakeGatewayClick,
  onPreauthClick,
  openSettingsDialog,
  removeDevicesFromGroup,
  showsDialog,
  changeLocation,
  groupRemovedName
}) => {
  const limitMaxed = useSelector(getLimitMaxed);
  const devices = useSelector(state => getMappedDevicesList(state, 'deviceList'));
  const { selectedGroup, groupFilters = [] } = useSelector(getSelectedGroupInfo);
  const { columnSelection = [] } = useSelector(getUserSettings);
  const attributes = useSelector(getFilterAttributes);
  const { accepted: acceptedCount, pending: pendingCount, rejected: rejectedCount } = useSelector(getDeviceCountsByStatus);
  const allCount = acceptedCount + rejectedCount;
  const availableIssueOptions = useSelector(getAvailableIssueOptionsByType);
  const customColumnSizes = useSelector(state => state.users.customColumns);
  const deviceListState = useSelector(state => state.devices.deviceList);
  const { total: deviceCount } = deviceListState;
  const filters = useSelector(getDeviceFilters);
  const idAttribute = useSelector(getIdAttribute);
  const onboardingState = useSelector(getOnboardingState);
  const settingsInitialized = useSelector(getUserSettingsInitialized);
  const userCapabilities = useSelector(getUserCapabilities);
  const enabledTiers = useSelector(getEnabledTiers);
  const testDevicesCount = useSelector(getTestDeviceCount);
  const dispatch = useAppDispatch();
  const dispatchedSetSnackbar = useCallback((...args) => dispatch(setSnackbar(...args)), [dispatch]);

  const {
    refreshTrigger,
    selectedId,
    selectedIssues = [],
    isLoading: pageLoading,
    selection: selectedRows,
    sort = {},
    state: selectedState,
    detailsTab: tabSelection
  } = deviceListState;
  const { direction: sortDown = SORTING_OPTIONS.desc, key: sortCol } = sort;
  const { canManageDevices, canManageUsers } = userCapabilities;
  const currentSelectedState = states[selectedState] ?? states.devices;
  const [columnHeaders, setColumnHeaders] = useState([]);
  const [isInitialized, setIsInitialized] = useState(false);
  const [devicesInitialized, setDevicesInitialized] = useState(!!devices.length);
  const [showFilters, setShowFilters] = useState(false);
  const [showCustomization, setShowCustomization] = useState(false);
  const [selectedTier, setSelectedTier] = useState('');
  const [pendingTestDevice, setPendingTestDevice] = useState(null);
  const deviceListRef = useRef();
  const timer = useRef();
  const navigate = useNavigate();

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const size = useWindowSize();

  const { classes } = useStyles();

  useEffect(() => {
    clearAllRetryTimers(dispatchedSetSnackbar);
    if (!filters.length && selectedGroup && groupFilters.length) {
      dispatch(setDeviceFilters(groupFilters));
    }
    setShowFilters(!!filters.length);
    return () => {
      clearInterval(timer.current);
      clearAllRetryTimers(dispatchedSetSnackbar);
      dispatch(setDeviceListState({ selection: [] }));
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch, dispatchedSetSnackbar]);

  useEffect(() => {
    const columnHeaders = getHeaders(columnSelection, currentSelectedState.defaultHeaders, idAttribute, canManageUsers ? openSettingsDialog : undefined);
    setColumnHeaders(columnHeaders);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [canManageUsers, columnSelection, idAttribute.attribute, currentSelectedState.defaultHeaders, openSettingsDialog]);

  useEffect(() => {
    // only set state after all devices id data retrieved
    setIsInitialized(isInitialized => isInitialized || (settingsInitialized && devicesInitialized && pageLoading === false));
    setDevicesInitialized(devicesInitialized => devicesInitialized || pageLoading === false);
  }, [settingsInitialized, devicesInitialized, pageLoading]);

  const onDeviceStateSelectionChange = useCallback(
    newState => {
      changeLocation(newState);
      dispatch(
        setDeviceListState({
          state: newState,
          page: 1,
          refreshTrigger: !refreshTrigger,
          shouldSelectDevices: true,
          forceRefresh: false,
          fetchAuth: false,
          filterSelection: undefined
        })
      );
    },
    [dispatch, changeLocation, refreshTrigger]
  );

  useEffect(() => {
    if (onboardingState.complete) {
      return;
    }
    if (pendingCount) {
      dispatch(advanceOnboarding(onboardingSteps.DEVICES_PENDING_ONBOARDING_START));
      return;
    }
    if (!acceptedCount) {
      return;
    }

    if (acceptedCount < 2 && !window.sessionStorage.getItem('pendings-redirect')) {
      window.sessionStorage.setItem('pendings-redirect', true);
      onDeviceStateSelectionChange(DEVICE_STATES.accepted);
    }
  }, [acceptedCount, allCount, pendingCount, onboardingState.complete, dispatch, onDeviceStateSelectionChange, dispatchedSetSnackbar]);

  useEffect(() => {
    if (selectedGroup) {
      setShowFilters(false);
    }
  }, [selectedGroup]);

  const dispatchDeviceListState = useCallback(
    (options, shouldSelectDevices = true, forceRefresh = false, fetchAuth = false) =>
      dispatch(setDeviceListState({ ...options, shouldSelectDevices, forceRefresh, fetchAuth })),
    [dispatch]
  );

  const refreshDevices = useCallback(() => {
    const refreshLength = deviceRefreshTimes[selectedState] ?? deviceRefreshTimes.default;
    return dispatchDeviceListState({}, true, true).catch(err =>
      setRetryTimer(err, 'devices', `Devices couldn't be loaded.`, refreshLength, dispatchedSetSnackbar)
    );
  }, [dispatchedSetSnackbar, selectedState, dispatchDeviceListState]);

  useEffect(() => {
    if (!devicesInitialized) {
      return;
    }
    const refreshLength = deviceRefreshTimes[selectedState] ?? deviceRefreshTimes.default;
    clearInterval(timer.current);
    timer.current = setInterval(() => refreshDevices(), refreshLength);
  }, [devicesInitialized, refreshDevices, selectedState]);

  useEffect(() => {
    Object.keys(availableIssueOptions).forEach(key => dispatch(getIssueCountsByType({ type: key, filters, group: selectedGroup, state: selectedState })));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedIssues.join(''), JSON.stringify(availableIssueOptions), selectedState, selectedGroup, dispatch, JSON.stringify(filters)]);

  /*
   * Devices
   */
  const devicesToIds = devices => devices.map(device => device.id);

  const onRemoveDevicesFromGroup = devices => {
    const deviceIds = devicesToIds(devices);
    removeDevicesFromGroup(deviceIds);
    // if devices.length = number on page but < deviceCount
    // move page back to pageNO 1
    if (devices.length === deviceIds.length) {
      handlePageChange(1);
    }
  };
  const onSetTestDevice = (devices, isTestDevice) => setPendingTestDevice({ deviceId: devices[0].id, isTestDevice });

  const onCancelTestDevice = () => setPendingTestDevice(null);

  const onConfirmTestDevice = () => {
    if (!pendingTestDevice) {
      return;
    }
    return dispatch(setTestDeviceStatus({ deviceId: pendingTestDevice.deviceId, test_device: pendingTestDevice.isTestDevice }))
      .unwrap()
      .then(() => {
        setPendingTestDevice(null);
      });
  };

  const onAuthorizationChange = (devices, changedState) => {
    const deviceIds = devicesToIds(devices);
    return dispatchDeviceListState({ isLoading: true })
      .then(() => dispatch(updateDevicesAuth({ deviceIds, status: changedState })))
      .then(() => onSelectionChange([]));
  };

  const onDeviceDismiss = devices =>
    dispatchDeviceListState({ isLoading: true })
      .then(() => {
        const deleteRequests = devices.reduce((accu, device) => {
          if (device.auth_sets?.length) {
            accu.push(dispatch(deleteAuthset({ deviceId: device.id, authId: device.auth_sets[0].id })));
          }
          return accu;
        }, []);
        return Promise.all(deleteRequests);
      })
      .then(() => onSelectionChange([]));

  const handlePageChange = useCallback(page => dispatchDeviceListState({ selectedId: undefined, page }), [dispatchDeviceListState]);

  const onPageLengthChange = perPage => dispatchDeviceListState({ perPage, page: 1, refreshTrigger: !refreshTrigger });

  const onSortChange = attribute => {
    const changedSortCol = attribute.name;
    let changedSortDown = sortDown === SORTING_OPTIONS.desc ? SORTING_OPTIONS.asc : SORTING_OPTIONS.desc;
    if (changedSortCol !== sortCol) {
      changedSortDown = SORTING_OPTIONS.desc;
    }
    dispatchDeviceListState({
      sort: { direction: changedSortDown, key: changedSortCol, scope: attribute.scope },
      refreshTrigger: !refreshTrigger
    });
  };

  const setDetailsTab = detailsTab => dispatchDeviceListState({ detailsTab, setOnly: true });

  const onDeviceIssuesSelectionChange = ({ target: { value: selectedIssues } }) =>
    dispatchDeviceListState({ selectedIssues, page: 1, refreshTrigger: !refreshTrigger });
  useEffect(() => {
    const tierFilter = filters.find(({ key, scope }) => key === 'tier' && scope === Scope.SYSTEM);
    setSelectedTier(tierFilter?.value || '');
  }, [filters]);

  const onTierSelectionChange = useCallback(
    tier => {
      setSelectedTier(tier);
      const updatedFilters = filters.filter(({ key, scope }) => !(key === 'tier' && scope === Scope.SYSTEM));
      if (tier) {
        updatedFilters.push({ key: 'tier', scope: 'system', operator: DEVICE_FILTERING_OPTIONS.$eq.key, value: tier });
      }
      dispatch(setDeviceFilters(updatedFilters));
      dispatch(
        setDeviceListState({ selectedId: undefined, page: 1, shouldSelectDevices: true, forceRefresh: true, fetchAuth: false, filterSelection: undefined })
      );
    },
    [dispatch, filters]
  );

  const onSelectionChange = (selection = []) => {
    if (!onboardingState.complete && selection.length) {
      dispatch(advanceOnboarding(onboardingSteps.DEVICES_PENDING_ACCEPTING_ONBOARDING));
    }
    dispatchDeviceListState({ selection, setOnly: true });
  };

  const onToggleCustomizationClick = () => setShowCustomization(toggle);

  const onChangeColumns = useCallback(
    (changedColumns, customColumnSizes) => {
      const { columnSizes, selectedAttributes } = calculateColumnSelectionSize(changedColumns, customColumnSizes);
      dispatch(updateUserColumnSettings({ columns: columnSizes }));
      dispatch(saveUserSettings({ columnSelection: changedColumns }));
      // we don't need an explicit refresh trigger here, since the selectedAttributes will be different anyway & otherwise the shown list should still be valid
      dispatchDeviceListState({ selectedAttributes });
      setShowCustomization(false);
    },
    [dispatch, dispatchDeviceListState]
  );

  const onExpandClick = (device = {}) => {
    dispatchedSetSnackbar('');
    const { id } = device;
    dispatchDeviceListState({ selectedId: deviceListState.selectedId === id ? undefined : id, detailsTab: deviceListState.detailsTab || 'identity' });
    if (!onboardingState.complete) {
      dispatch(advanceOnboarding(onboardingSteps.DEVICES_PENDING_ONBOARDING));
    }
  };

  const onCreateDeploymentClick = devices =>
    navigate(`/deployments?open=true&${devices.map(({ id }) => `deviceId=${id}`).join('&')}`, { state: { internal: true } });

  const onCloseExpandedDevice = useCallback(() => dispatchDeviceListState({ selectedId: undefined, detailsTab: '' }), [dispatchDeviceListState]);

  const onResizeColumns = useCallback(columns => dispatch(updateUserColumnSettings({ columns })), [dispatch]);

  const actionCallbacks = {
    onAddDevicesToGroup: addDevicesToGroup,
    onAuthorizationChange,
    onCreateDeployment: onCreateDeploymentClick,
    onDeviceDismiss,
    onPromoteGateway: onMakeGatewayClick,
    onRemoveDevicesFromGroup,
    onSetTestDevice
  };

  const listOptionHandlers = [{ key: 'customize', title: 'Customize', onClick: onToggleCustomizationClick }];
  const EmptyState = currentSelectedState.emptyState;

  const groupLabel = selectedGroup ? decodeURIComponent(selectedGroup) : ALL_DEVICES;
  const isUngroupedGroup = selectedGroup && selectedGroup === UNGROUPED_GROUP.id;
  const selectedStaticGroup = selectedGroup && !groupFilters.length ? selectedGroup : undefined;

  const openedDevice = useDebounce(selectedId, TIMEOUTS.debounceShort);
  const issueOptions = Object.values(availableIssueOptions);
  return (
    <>
      <div className="margin-left-small">
        <div className="flexbox align-items-center">
          <Typography className="margin-right" variant="h6">
            {isUngroupedGroup ? UNGROUPED_GROUP.name : groupLabel}
          </Typography>
          <div className="flexbox space-between align-items-center" style={{ flexGrow: 1 }}>
            <div className="flexbox align-items-center">
              <DeviceStateSelection className={classes.selection} onStateChange={onDeviceStateSelectionChange} selectedState={selectedState} states={states} />
              {enabledTiers.length > 1 && (
                <TierSelection className={classes.selection} onChange={onTierSelectionChange} selectedTier={selectedTier} enabledTiers={enabledTiers} />
              )}
              {!!issueOptions.length && (
                <DeviceIssuesSelection
                  className={classes.selection}
                  onChange={onDeviceIssuesSelectionChange}
                  options={issueOptions}
                  selection={selectedIssues}
                />
              )}
              {selectedGroup && !isUngroupedGroup && (
                <Typography variant="subtitle1" className="margin-left flexbox align-items-center">
                  {!groupFilters.length ? (
                    <>
                      Static <Lock className="margin-left-x-small" fontSize="small" />
                    </>
                  ) : (
                    <>
                      Dynamic <SyncOutlined className="margin-left-x-small" fontSize="small" />
                    </>
                  )}
                </Typography>
              )}
            </div>
            {canManageDevices && selectedGroup && !isUngroupedGroup && !groupRemovedName && (
              <Button onClick={onGroupRemoval} startIcon={<DeleteIcon />}>
                Remove group
              </Button>
            )}
          </div>
        </div>
        <div className="flexbox align-items-center space-between margin-top margin-bottom-x-small">
          {!isUngroupedGroup && (
            <Button
              className="flexbox"
              color={showFilters ? 'neutral' : ''}
              onClick={() => setShowFilters(toggle)}
              startIcon={<FilterListIcon />}
              variant={showFilters ? 'contained' : 'text'}
            >
              {filters.length > 0 ? `Filters (${filters.length})` : 'Filters'}
            </Button>
          )}
          <ListOptions options={listOptionHandlers} title="Table options" />
        </div>
        <Filters className={classes.filterCommon} onGroupClick={onGroupClick} open={showFilters} />
      </div>
      <Loader show={!isInitialized} />
      <div className="padding-bottom" ref={deviceListRef}>
        {devices.length > 0 ? (
          <DeviceList
            columnHeaders={columnHeaders}
            customColumnSizes={customColumnSizes}
            devices={devices}
            deviceListState={deviceListState}
            idAttribute={idAttribute}
            onChangeRowsPerPage={onPageLengthChange}
            onExpandClick={onExpandClick}
            onPageChange={handlePageChange}
            onResizeColumns={onResizeColumns}
            onSelect={onSelectionChange}
            onSort={onSortChange}
            pageLoading={pageLoading}
            pageTotal={deviceCount}
            PaginationProps={{ classes: { spacer: 'flexbox no-basis', toolbar: 'padding-left-none' } }}
          />
        ) : (
          <EmptyState allCount={allCount} canManageDevices={canManageDevices} filters={filters} limitMaxed={limitMaxed} onClick={onPreauthClick} />
        )}
      </div>
      <ExpandedDevice
        actionCallbacks={actionCallbacks}
        deviceId={openedDevice}
        onClose={onCloseExpandedDevice}
        setDetailsTab={setDetailsTab}
        tabSelection={tabSelection}
      />
      {!selectedId && !showsDialog && <OnboardingComponent deviceListRef={deviceListRef} onboardingState={onboardingState} />}
      {canManageDevices && !!selectedRows.length && (
        <DeviceQuickActions actionCallbacks={actionCallbacks} deviceId={openedDevice} selectedGroup={selectedStaticGroup} />
      )}
      <ColumnCustomizationDialog
        attributes={attributes}
        columnHeaders={columnHeaders}
        customColumnSizes={customColumnSizes}
        idAttribute={idAttribute}
        open={showCustomization}
        onCancel={onToggleCustomizationClick}
        onSubmit={onChangeColumns}
      />
      <ConfirmModal
        header={pendingTestDevice?.isTestDevice ? 'Set as test device?' : 'Remove as test device?'}
        description={
          <div>
            {pendingTestDevice?.isTestDevice ? (
              <>
                <Typography>
                  Enable up to 10 test devices to bypass rate limits and check in more frequently for faster testing. Adjust the polling intervals on the device
                  configuration to match.{' '}
                </Typography>
                <DocsLink path="overview/limits" title="Learn more" />
                <Typography className="margin-top-small">You can add or remove test devices up to 20 times a day.</Typography>
              </>
            ) : (
              <Typography>
                Are you sure you want to remove the test device status from this device? You can add or remove test devices up to 20 times a day.
              </Typography>
            )}
            <TestDeviceLimit testDeviceUsed={testDevicesCount} className="margin-top-small" />
          </div>
        }
        open={!!pendingTestDevice}
        confirmButtonText={pendingTestDevice?.isTestDevice ? 'Set as test device' : 'Remove as test device'}
        close={onCancelTestDevice}
        onConfirm={onConfirmTestDevice}
        isDanger={false}
      />
    </>
  );
};

export default Authorized;
