/*
 * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
 *
 * This file is part of Sophie.
 *
 * Sophie is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, version 3.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */

import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import { alpha, styled } from '@mui/material/styles';
import { observer } from 'mobx-react-lite';
import React from 'react';

import { useStore } from '../StoreProvider';

import ServiceIcon from './ServiceIcon';

const ServiceSwitcherRoot = styled(Tabs, {
  name: 'ServiceSwitcher',
  slot: 'Root',
})(({ theme }) => ({
  // Move the indicator to the outer side of the window.
  '.MuiTabs-indicator': {
    ...(theme.direction === 'ltr'
      ? {
          left: 0,
          right: 'auto',
        }
      : {
          left: 'auto',
          right: 0,
        }),
  },
}));

const ServiceSwitcherTab = styled(Tab, {
  name: 'ServiceSwitcher',
  slot: 'Tab',
})(({ theme }) => ({
  minWidth: 0,
  paddingInline: theme.spacing(2),
  transition: theme.transitions.create('background-color', {
    duration: theme.transitions.duration.shortest,
  }),
  '&.Mui-selected': {
    backgroundColor:
      theme.palette.mode === 'dark'
        ? alpha(theme.palette.text.primary, 0.13)
        : alpha(theme.palette.primary.light, 0.24),
  },
}));

function ServiceSwitcher(): JSX.Element {
  const { settings, services } = useStore();
  const { selectedService } = settings;

  return (
    <ServiceSwitcherRoot
      variant="scrollable"
      orientation="vertical"
      value={selectedService === undefined ? false : selectedService.id}
      onChange={(_event, newValue: string) =>
        settings.setSelectedServiceId(newValue)
      }
    >
      {services.map((service) => (
        <ServiceSwitcherTab
          key={service.id}
          value={service.id}
          icon={<ServiceIcon service={service} />}
          aria-label={service.settings.name}
        />
      ))}
    </ServiceSwitcherRoot>
  );
}

export default observer(ServiceSwitcher);