import React from 'react';
import { useTranslation } from 'react-i18next';
import { useAtomValue } from 'jotai';
import { Box, Icon, Icons, Text, toRem } from 'folds';
import { Room } from 'matrix-js-sdk';
import { useRoomName } from '../../../hooks/useRoomMeta';
import { NavButton, NavItem, NavItemContent } from '../../../components/nav';
import { channelsWorkspaceSheetAtom } from '../../../state/channelsWorkspaceSheet';
import {
  useCloseChannelsWorkspaceSheet,
  useOpenChannelsWorkspaceSheet,
} from '../../../state/hooks/channelsWorkspaceSheet';
import { SpaceAvatar } from './SpaceAvatar';
import { CHANNELS_WORKSPACE_DRAG_ORIGIN_ATTR } from './ChannelsWorkspaceHorseshoe';
import { WorkspaceFooterShell } from './WorkspaceFooter.css';

const ROW_MIN_HEIGHT = toRem(68);

type WorkspaceFooterProps = {
  space: Room;
};

// Bottom-of-channels-list workspace identity row. Styled like
// `DirectSelfRow` so the DM and Channels panes get the same fat footer
// button. Tap → open the horseshoe sheet (atom-driven). Drag-up →
// `ChannelsWorkspaceHorseshoe` picks up the gesture via the
// `data-channels-workspace-drag-origin` data attribute and drives the
// sheet expansion from 0 → railHeight. Tap and drag are reconciled by
// the canonical document-level listener pattern: touchstart /
// pointerdown are passive, so the synthesised click still fires for
// no-movement taps.
//
// Active-space tracking lives upstream in `Channels.tsx::useEffect`
// (writes localStorage) and `useActiveSpace` (URL > localStorage >
// first orphan resolver). The sheet's spaces list re-resolves from
// `useOrphanSpaces` and updates reactively when the user leaves the
// active space.
export function WorkspaceFooter({ space }: WorkspaceFooterProps) {
  const { t } = useTranslation();
  const activeName = useRoomName(space);
  const open = useAtomValue(channelsWorkspaceSheetAtom);
  const openSheet = useOpenChannelsWorkspaceSheet();
  const closeSheet = useCloseChannelsWorkspaceSheet();

  const handleToggle = () => {
    if (open) {
      closeSheet();
    } else {
      openSheet();
    }
  };

  return (
    <Box
      {...{ [CHANNELS_WORKSPACE_DRAG_ORIGIN_ATTR]: true }}
      className={WorkspaceFooterShell}
    >
      <NavItem variant="Background" radii="400" style={{ minHeight: ROW_MIN_HEIGHT }}>
        <NavButton
          onClick={handleToggle}
          aria-label={t('Channels.workspace_switcher_aria')}
          aria-haspopup="dialog"
          aria-expanded={open}
        >
          <NavItemContent>
            <Box
              as="span"
              grow="Yes"
              alignItems="Center"
              gap="300"
              style={{
                minHeight: ROW_MIN_HEIGHT,
                boxSizing: 'border-box',
                padding: `${toRem(8)} 0`,
              }}
            >
              <SpaceAvatar space={space} size={40} />
              <Box
                as="span"
                direction="Column"
                grow="Yes"
                gap="100"
                style={{ minWidth: 0, overflow: 'hidden' }}
              >
                <Text as="span" size="T300" truncate style={{ fontWeight: 600 }}>
                  {activeName}
                </Text>
                <Text as="span" size="T200" truncate style={{ opacity: 0.6 }}>
                  {t('Channels.workspace_footer_subtitle')}
                </Text>
              </Box>
              <Icon
                src={Icons.ChevronTop}
                size="100"
                style={{ opacity: 0.55, flexShrink: 0 }}
              />
            </Box>
          </NavItemContent>
        </NavButton>
      </NavItem>
    </Box>
  );
}
