workavia-calendar-front/src/components/Calendar/ImportTab.tsx

import { useAppSelector } from '@/app/hooks'
import { extractEventBaseUuid } from '@/utils/extractEventBaseUuid'
import {
  Box,
  Button,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
  TextField,
  Typography
} from '@linagora/twake-mui'
import { useEffect, useState } from 'react'
import { useI18n } from 'twake-i18n'
import { CalendarItemList } from './CalendarItemList'
import { SettingsTab } from './SettingsTab'

export function ImportTab({
  userId,
  importTarget,
  setImportTarget,
  setImportedContent,
  newCalParams
}: {
  userId: string
  importTarget: string
  setImportTarget: (target: string) => void
  setImportedContent: (content: File | null) => void
  newCalParams: {
    name: string
    setName: (name: string) => void
    description: string
    setDescription: (d: string) => void
    color: Record<string, string>
    setColor: (color: Record<string, string>) => void
    visibility: 'public' | 'private'
    setVisibility: (visibility: 'public' | 'private') => void
  }
}) {
  const { t } = useI18n()
  const [importMode] = useState<'file' | 'url'>('file')
  const [importFile, setImportFile] = useState<File | null>(null)
  const [importUrl, setImportUrl] = useState('')
  const calendars = useAppSelector(state => state.calendars.list)
  const personalCalendars = Object.values(calendars).filter(
    cal => extractEventBaseUuid(cal.id) === userId
  )

  useEffect(() => {
    setImportedContent(importMode === 'file' ? importFile : null)
  }, [importFile, importUrl, importMode, setImportedContent])

  return (
    <>
      {/* Form group 1: Select file button - first group, margin top 0 */}
      {importMode === 'file' && (
        <Box mt={0}>
          <Button
            variant="outlined"
            component="label"
            size="medium"
            sx={{ borderRadius: '12px' }}
          >
            {t('common.select_file')}
            <input
              type="file"
              hidden
              accept=".ics"
              onChange={e => setImportFile(e.target.files?.[0] ?? null)}
            />
          </Button>
          {importFile && (
            <Typography
              variant="body2"
              color="text.secondary"
              sx={{ marginTop: '6px' }}
            >
              {importFile.name}
            </Typography>
          )}
          <Typography
            variant="caption"
            color="text.secondary"
            display="block"
            sx={{ marginTop: '6px' }}
          >
            {t('calendar.import_file_description')}
          </Typography>
        </Box>
      )}

      {/* Form group 2: URL field */}
      {importMode === 'url' && (
        <Box mt={0}>
          <TextField
            fullWidth
            label={t('calendar.ics_feed_url')}
            value={importUrl}
            onChange={e => setImportUrl(e.target.value)}
            size="small"
            margin="dense"
            sx={{
              '&.MuiFormControl-root.MuiFormControl-marginDense': {
                marginTop: '6px',
                marginBottom: 0
              }
            }}
          />
        </Box>
      )}

      {/* Form group 3: Import to */}
      <Box mt={2}>
        <FormControl
          fullWidth
          size="small"
          margin="dense"
          sx={{
            '&.MuiFormControl-root.MuiFormControl-marginDense': {
              marginTop: '6px',
              marginBottom: 0
            }
          }}
        >
          <InputLabel id="import-to-label">
            {t('calendar.import_to')}
          </InputLabel>
          <Select
            labelId="import-to-label"
            label={t('calendar.import_to')}
            value={importTarget}
            onChange={e => setImportTarget(e.target.value)}
          >
            <MenuItem value="new">{t('calendar.new_calendar')}</MenuItem>
            {CalendarItemList(personalCalendars)}
          </Select>
        </FormControl>
      </Box>

      {/* Form group 4: SettingsTab (when importing to new calendar) */}
      {importTarget === 'new' && (
        <Box mt={2}>
          <SettingsTab {...newCalParams} />
        </Box>
      )}
    </>
  )
}