import { useTranslation } from 'react-i18next';

import { Grid, Stack, Typography } from '@mui/material';
import { IconAlertCircle } from '@tabler/icons-react';

import Search from '../../../../design-system/Inputs/Search';
import SelectionCard from '../../../SelectionCard';
import StateCard from '../../../StateCard';

import SelectInstanceDrawerSkeleton from './SelectInstanceDrawerSkeleton';

export type SelectInstanceDrawerProps = {
  loading: boolean;
  instances: {
    id: number;
    name: string;
    logo: string;
  }[];
  onSelectInstance: (instance: { name: string; logo: string }) => void;
  searchProps?: { query: string; setQuery: (query: string) => void };
  showSearch?: boolean;
};

const SelectInstanceDrawerContent = ({
  loading,
  instances,
  onSelectInstance,
  searchProps,
  showSearch = true,
}: SelectInstanceDrawerProps) => {
  const { t } = useTranslation('material_hu_only');

  const showEmptyState = !loading && !instances.length;

  return (
    <Stack sx={{ gap: 2, height: '100%' }}>
      {showSearch && (
        <Search
          placeholder={t('login.search_placeholder')}
          value={searchProps?.query!}
          onChange={searchProps?.setQuery}
        />
      )}
      <Grid
        container
        sx={{
          backgroundColor: theme =>
            theme.palette.new.background.elements.default,
          p: 2,
          borderRadius: theme => theme.shape.borderRadiusL,
          overflowY: 'auto',
          maxHeight: 'calc(100vh - 200px)',
          display: showEmptyState ? 'none' : 'flex',
        }}
      >
        {loading && <SelectInstanceDrawerSkeleton />}
        {!loading &&
          instances.map(instance => (
            <Grid
              item
              xs={12}
              sm={6}
              key={instance.id}
              sx={{ justifyContent: 'center', display: 'flex', my: 1 }}
            >
              <SelectionCard
                key={instance.id}
                onClick={() => onSelectInstance(instance)}
                checked={false}
                sx={{
                  width: '95%',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Stack sx={{ width: '100%', alignItems: 'center' }}>
                  <img
                    src={instance.logo}
                    style={{
                      height: '32px',
                      width: '130px',
                      objectFit: 'contain',
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}
                    alt=""
                  />
                </Stack>
                <Stack sx={{ width: '100%', mt: 0.5 }}>
                  <Typography
                    variant="globalXXS"
                    title={instance.name}
                    textAlign="center"
                    sx={{
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap',
                      color: theme => theme.palette.new.text.neutral.lighter,
                    }}
                  >
                    {instance.name}
                  </Typography>
                </Stack>
              </SelectionCard>
            </Grid>
          ))}
      </Grid>
      {showEmptyState && (
        <StateCard
          slotProps={{
            avatar: {
              Icon: IconAlertCircle,
            },
            title: {
              title: t('login.no_community_found'),
              description: t('login.no_community_found_description'),
            },
          }}
          sx={{
            flex: 1,
            p: 10,
            '& .MuiCardContent-root': {
              justifyContent: 'center',
              alignItems: 'center',
              display: 'flex',
              flexDirection: 'column',
              height: '100%',
              gap: 2,
            },
          }}
        />
      )}
    </Stack>
  );
};

export default SelectInstanceDrawerContent;
