Home.tsx

import { IonContent, IonPage } from '@ionic/react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Box, Typography } from '@mui/material';

import {
  ArticleCard,
  Button,
  ClinicInformationCard,
  VSpacer,
} from '../../../components/DesignSystem';
import { Color } from '../../../theme/MUITheme/colors';
import EmergencyIcon from '../../../components/icons/EmergencyIcon';
import { useEffect, useState } from 'react';
import { IArticle } from '@libs/shared';
import { ArticleApi } from '../../../services/ApiService/Article';
import { ActionButtonCard } from '../../../components/DesignSystem';

import './Home.scss';
import { useHistory } from 'react-router';

const EmergencyHandler = () => {
  // TODO: Implement emergency handler
};

const ClinicHandler = () => {
  // TODO: Implement clinic handler
};

const HelpHandler = () => {
  // TODO: Implement help handler
};

export default function HomeAuth() {
  const [articles, setArticles] = useState<IArticle[] | [] | null>(null);
  const router = useHistory();

  async function getArticles() {
    try {
      const articles = await ArticleApi.getAllArticles();
      setArticles(articles);
    } catch (error) {
      console.error(error);
      return null;
    }
  }

  useEffect(() => {
    getArticles();
  }, []);

  return (
    <IonPage>
      <IonContent>
        <header
          id="header"
          style={{
            margin: '0',
            height: '220px',
            padding: '0 14px 21px',
            background: `linear-gradient(224deg, ${Color.primary.main} 31.96%, rgba(179, 65, 182, 0.97) 81.57%)`,
          }}
        >
          <Box sx={{ margin: '0 0 25px 0' }}>
            <Typography variant="h1" color={Color.neutral.white} fontSize="16px" fontWeight={700}>
              Recuerda que puedas iniciar sesión o registrarte para obtener beneficios adicionales.
            </Typography>
            <VSpacer size="2" />
            <Button
              color={Color.neutral.white}
              sx={{
                color: Color.primary.main,
                padding: '10px 20px',
                fontSize: '12px',
                '&:hover': {
                  backgroundColor: Color.neutral.white,
                  color: Color.primary.main,
                },
              }}
              testID="home-auth"
              variant="contained"
              id="auth-button"
              onClick={() => router.push('/login')}
            >
              Iniciar sesión / Registrarse
            </Button>
          </Box>
          <Box sx={{ margin: '0', padding: '0' }}>
            <img
              src="/assets/images/3d-casual-life-girl-holding-laptop-and-having-an-idea-1.png"
              alt="Girl with a holding laptop"
              style={{ maxWidth: '110px' }}
            />
          </Box>
        </header>
        <main
          style={{
            padding: '27px 14px 0 14px',
            margin: '-25px 0 0 0',
            minHeight: '80vh',
            borderRadius: '30px 30px 0 0',
            background: Color.primary.light1,
          }}
        >
          <section>
            <Typography
              variant="h1"
              margin="0"
              fontSize="18px"
              fontWeight={700}
              color={Color.primary.main}
            >
              ¿Qué necesitas?
            </Typography>
            <VSpacer size="5" />
            <Box display="flex" justifyContent="space-around" alignItems="center">
              <ActionButtonCard
                className="action-button-card"
                name="Clínicas"
                image="/assets/images/3d-casual-life-hospital.png"
                onClick={ClinicHandler}
              />

              <ActionButtonCard
                className="action-button-card"
                name="Ayuda"
                image="/assets/images/3d-white-dog-talking-standing.png"
                onClick={HelpHandler}
              />
            </Box>
            <VSpacer size="7" />
            <Box display="flex" justifyContent="space-around" alignItems="center">
              <Button
                onClick={EmergencyHandler}
                color={Color.semantic.red.main}
                testID="emergency-button"
                accessoryLeft={<EmergencyIcon color="#fff" />}
              >
                Emergencia
              </Button>
            </Box>
          </section>
          <VSpacer size="6" />
          <section>
            <Typography variant="h1" fontSize="18px" fontWeight={700} color={Color.primary.main}>
              Sugerencias
            </Typography>
            <VSpacer size="7" />
            <Typography variant="body1" color={Color.neutral.black} fontSize="12px">
              Cercanos a mi ubicación
            </Typography>
            <VSpacer size="4" />
            <Swiper style={{ margin: '0 -22px 0 0' }} spaceBetween="12px" slidesPerView="auto">
              {/* TODO: show recommendations for user */}
              {Array.from({ length: 5 }).map((_, index) => (
                <SwiperSlide key={index} style={{ width: '231px' }}>
                  <ClinicInformationCard
                    clinicInformation={{
                      name: 'Veterinaria Lola',
                      directPhone: '0414-4555555',
                      address: {
                        main: 'Avenida Bolivar',
                        state: 'Caracas',
                        city: 'Caracas',
                        secondary: 'd',
                        postalCode: '4505',
                      },
                      rating: 5.2,
                      pictures: ['d'],
                      taxId: 'id',
                      paymentMethods: [{ value: 'ho' }],
                    }}
                  />
                </SwiperSlide>
              ))}
            </Swiper>
          </section>
          <VSpacer size="6" />
          <section>
            <Typography variant="body1" color={Color.neutral.black} fontSize="12px">
              Artículos
            </Typography>
            <VSpacer size="4" />
            <Swiper style={{ margin: '0 -22px 0 0' }} spaceBetween="12px" slidesPerView="auto">
              {articles ? (
                articles.map((article) => (
                  <SwiperSlide key={article.id} style={{ width: '170px' }}>
                    <ArticleCard name={article.title ?? ''} link={`/articles/${article.id}`} />
                  </SwiperSlide>
                ))
              ) : (
                <Typography variant="caption2">Nada para mostrar</Typography>
              )}
            </Swiper>
          </section>
        </main>
      </IonContent>
    </IonPage>
  );
}