import React from 'react';
import { Tabs, Typography } from 'antd';
import { CodeOutlined, WindowsOutlined } from '@ant-design/icons';
import { useStore } from '../../store';
import { SshTab } from './SshTab';
import { RdpTab } from './RdpTab';
import { Session } from '../../types';

function tabLabel(session: Session) {
  const icon =
    session.connection.protocol === 'rdp' ? (
      <WindowsOutlined />
    ) : (
      <CodeOutlined />
    );
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
      {icon}
      {session.connection.name}
    </span>
  );
}

export const SessionTabs: React.FC = () => {
  const sessions = useStore((s) => s.sessions);
  const activeSessionId = useStore((s) => s.activeSessionId);
  const closeSession = useStore((s) => s.closeSession);
  const setActiveSession = useStore((s) => s.setActiveSession);

  if (sessions.length === 0) {
    return (
      <div
        style={{
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          color: '#bfbfbf',
          userSelect: 'none',
        }}
      >
        <Typography.Title level={4} type="secondary" style={{ marginBottom: 8 }}>
          No open sessions
        </Typography.Title>
        <Typography.Text type="secondary">
          Double-click a connection in the sidebar to start a session.
        </Typography.Text>
      </div>
    );
  }

  return (
    <Tabs
      type="editable-card"
      hideAdd
      activeKey={activeSessionId ?? undefined}
      onChange={setActiveSession}
      onEdit={(key, action) => {
        if (action === 'remove') closeSession(key as string);
      }}
      style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
      tabBarStyle={{ margin: 0, flexShrink: 0 }}
      items={sessions.map((session) => ({
        key: session.id,
        label: tabLabel(session),
        closable: true,
        style: { height: '100%', padding: 0 },
        children: (
          <div style={{ height: '100%', overflow: 'hidden' }}>
            {session.connection.protocol === 'ssh' ? (
              <SshTab session={session} />
            ) : (
              <RdpTab session={session} />
            )}
          </div>
        ),
      }))}
    />
  );
};