import { useEffect, useState } from 'react';

import Step from '../Step';
import PlantList from './PlantList'
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import PlantRepository from '../../../repository/PlantRepository'
import { Typography, Box } from '@mui/material';
import resultsBackgroundImage from '../../../assets/img/stepBackgrounds/step6.jpg';


export default function ResultsStep(props) {
    const [plants, setPlants] = useState([]);

    useEffect(() => {
        const updatePlants = () => {
            PlantRepository.getFilteredPlants(props.filters).then(response => {
                if (response.status === 200) {
                    setPlants(response.data)
                }
            }).catch(e => {
                this.setState({ plants: ["No plants found."] });
            })
        }    
        updatePlants()},
        [props.filters]);


    function createData(name, growthForm, moisturePreferences, plantTolerances, ecosystemServices, carbonSequestration, plantingStage) {
        return {
            name,
            growthForm,
            moisturePreferences,
            plantTolerances,
            ecosystemServices,
            carbonSequestration,
            plantingStage
        };
    }

    const getTableRows = () => {
        return plants.map((plant) => {
            return createData(
                plant.display_name,
                plant.display_growth_form,
                plant.moisture_preferences,
                plant.plant_tolerances,
                plant.ecosystem_services,
                plant.carbon_sequestration,
                plant.stage
            );
        })
    }

    const downloadCSV = () => {
        PlantRepository.getPlantsCSV(props.filters).then(response => {
            const url = window.URL.createObjectURL(new Blob([response.data], {type : 'text/csv'}));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'plants.csv');
            document.body.appendChild(link);
            link.click();
        })
    }

    const stepContent = (
        <div className="py-4">
            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} className="pb-4">
                <Typography variant='h5'>Plant List Results</Typography>
                <Stack spacing={2} direction="row" justifyContent="end">
                    <Button variant="contained">Download PDF</Button>
                    <Button variant="contained" onClick={() => downloadCSV()}>Download CSV</Button>
                </Stack>
            </Box>
            <PlantList rows={getTableRows()}/>
        </div>
    )

    return (
        <Step contentComponent={stepContent} backgroundImage={resultsBackgroundImage} />
    )
}
