import { FormControl, MenuItem, Select, Typography } from '@mui/material'
import type { SelectChangeEvent } from '@mui/material'
import { authService } from '../../services/authService'
import { useSessionStore } from '../../stores/sessionStore'

const MOCK_ORGANIZATIONS = [
  { id: 'org-wincasa', name: 'Wincasa AG' },
  { id: 'org-mobimo', name: 'Mobimo Management AG' },
  { id: 'org-ubs', name: 'UBS Asset Management RE' },
]

export function OrganizationSwitcher() {
  const { activeOrganizationId } = useSessionStore()

  async function handleChange(e: SelectChangeEvent<string>) {
    await authService.switchOrganization(e.target.value)
  }

  return (
    <FormControl size="small" fullWidth sx={{ mt: 0.5 }}>
      <Typography
        variant="caption"
        sx={{ color: 'text.secondary', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, mb: 0.5, display: 'block' }}
      >
        Organisation
      </Typography>
      <Select
        value={activeOrganizationId ?? ''}
        onChange={handleChange}
        sx={{ fontSize: '0.8rem' }}
      >
        {MOCK_ORGANIZATIONS.map((org) => (
          <MenuItem key={org.id} value={org.id} sx={{ fontSize: '0.8rem' }}>
            {org.name}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  )
}