import React, { useState } from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  TextField,
  Button,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Stack,
} from '@mui/material';
import { axiosInstance } from '../../../../../axiosApi';

import axios, { AxiosResponse } from 'axios';
import { BidAPI, PropertiesAPI } from 'types';

interface AddBidDialogProps {
  open: boolean;
  onClose: () => void;
  properties: PropertiesAPI[];
  onBidAdded: () => void;
}

export const AddBidDialog: React.FC<AddBidDialogProps> = ({
  open,
  onClose,
  properties,
  onBidAdded,
}) => {
  const [property, setProperty] = useState('');
  const [description, setDescription] = useState('');
  const [bidType, setBidType] = useState('');
  const [location, setLocation] = useState('');
  const [images, setImages] = useState<File[]>([]);

  const handleSubmit = async () => {
    const formData = new FormData();
    formData.append('property', property);
    formData.append('description', description);
    formData.append('bid_type', bidType);
    formData.append('location', location);
    images.forEach((image) => formData.append('images', image));

    try {
      const { data }: AxiosResponse<BidAPI> = await axiosInstance.post('/bids/', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });

      onBidAdded();
      onClose();
    } catch (error) {
      console.error('Failed to create bid', error);
    }
  };

  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle>Create New Bid</DialogTitle>
      <DialogContent>
        <Stack spacing={2} sx={{ mt: 2 }}>
          <FormControl fullWidth>
            <InputLabel>Property</InputLabel>
            <Select value={property} onChange={(e) => setProperty(e.target.value as string)}>
              {properties.map((p) => (
                <MenuItem key={p.id} value={p.id}>
                  {p.address}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
          <TextField
            label="Description"
            multiline
            rows={4}
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />
          <FormControl fullWidth>
            <InputLabel>Bid Type</InputLabel>
            <Select value={bidType} onChange={(e) => setBidType(e.target.value as string)}>
              <MenuItem value="electrical">Electrical</MenuItem>
              <MenuItem value="plumbing">Plumbing</MenuItem>
              <MenuItem value="carpentry">Carpentry</MenuItem>
              <MenuItem value="general_contractor">General Contractor</MenuItem>
            </Select>
          </FormControl>
          <FormControl fullWidth>
            <InputLabel>Location</InputLabel>
            <Select value={location} onChange={(e) => setLocation(e.target.value as string)}>
              <MenuItem value="living_room">Living Room</MenuItem>
              <MenuItem value="basement">Basement</MenuItem>
              <MenuItem value="kitchen">Kitchen</MenuItem>
              <MenuItem value="bathroom">Bathroom</MenuItem>
              <MenuItem value="bedroom">Bedroom</MenuItem>
              <MenuItem value="outside">Outside</MenuItem>
            </Select>
          </FormControl>
          <Button variant="contained" component="label">
            Upload Pictures
            <input
              type="file"
              hidden
              multiple
              onChange={(e) => e.target.files && setImages(Array.from(e.target.files))}
            />
          </Button>
          <Button variant="contained" onClick={handleSubmit}>
            Submit Bid
          </Button>
        </Stack>
      </DialogContent>
    </Dialog>
  );
};
