import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import { useNavigate, useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
import Divider from '@mui/material/Divider';
import { useSelector } from 'react-redux';
import { getDrugById } from '../../redux/selectors';
import { RootState } from '../../redux/store';
import axios from 'axios';
import Drug from '../../interfaces/Drug';

export default function DrugDetails() {
  const navigate = useNavigate();

  const id = parseInt(useParams().id ?? '0');

  const [drug, setDrug] = useState<Drug | null>(null);
  const potentialDrug = useSelector((state: RootState) =>
    getDrugById(state, id)
  );

  useEffect(() => {
    const fetchDrugById = async (id: number) => {
      try {
        const drug = await axios.get<Drug>(
          `https://silkroadapi.azurewebsites.net/Drug/get-drug/${id}`,
          { withCredentials: true }
        );
        setDrug(drug.data);
        console.log(drug);
      } catch (error) {
        console.error(error);
        navigate('/error');
      }
    };
    if (potentialDrug) setDrug(potentialDrug);
    else fetchDrugById(id);
  }, [id, navigate, potentialDrug]);

  const handleBackButton = () => {
    navigate(-1);
  };

  return (
    !!drug && (
      <div style={{ marginLeft: '15%', marginRight: '15%' }}>
        <Card sx={{ maxWidth: 1600 }}>
          <CardContent>
            <Typography variant='h3' gutterBottom>
              {drug?.name}
            </Typography>
            <Typography variant='h4' component='div'>
              ${drug?.price}
            </Typography>
            <Typography sx={{ mb: 1.5 }} color='text.secondary'>
              {drug?.description}
            </Typography>
            <Divider />
            <Typography variant='body1'>
              Manufacturer:
              <br />
              {drug?.manufacturer}
            </Typography>
            <Divider />
            <Typography variant='body1'>
              Side Effects:
              <br />
              {drug?.sideEffects}
            </Typography>
            <Divider />
            <Typography variant='body1'>
              Interactions:
              <br />
              {drug?.interactions}
            </Typography>
            <Divider />
            <Typography variant='body1'>
              Dosage:
              <br />
              {drug?.dosage}
            </Typography>
            <Divider />
            <Typography variant='body1'>
              Contraindications:
              <br />
              {drug?.contraindications}
            </Typography>
            <Divider />
            <Typography variant='body1'>
              Warnings:
              <br />
              {drug?.warnings}
            </Typography>
            <Divider />
            <Typography variant='body1'>
              Storage:
              <br />
              {drug?.storage}
            </Typography>
            <Divider />
            <Typography variant='body1'>
              Pregnacy:
              <br />
              {drug?.pregnancy}
            </Typography>
            <Divider />
            <Typography variant='body1'>
              Breastfeeding:
              <br />
              {drug?.breastfeeding}
            </Typography>
            <Divider />
            <Typography variant='body1'>
              Overdose:
              <br />
              {drug?.overdose}
            </Typography>
          </CardContent>
          <CardActions>
            <Button size='small' onClick={handleBackButton}>
              Back
            </Button>
          </CardActions>
        </Card>
      </div>
    )
  );
}
