import { useEffect } from 'react';
import { Drawer, Form, Input, Select, Switch, Button, message } from 'antd';
import type { CanvassLocation } from '@/types/canvass';
import type { SupportLevel } from '@/types/api';
import { SUPPORT_LEVEL_LABELS } from '@/types/api';

interface LocationEditDrawerProps {
  open: boolean;
  onClose: () => void;
  location: CanvassLocation | null;
  zIndex?: number;
}

const supportLevelOptions = (['LEVEL_1', 'LEVEL_2', 'LEVEL_3', 'LEVEL_4'] as SupportLevel[]).map(
  (k) => ({ label: SUPPORT_LEVEL_LABELS[k], value: k }),
);

export default function LocationEditDrawer({
  open,
  onClose,
  location,
  zIndex = 1000,
}: LocationEditDrawerProps) {
  const [form] = Form.useForm();
  // TODO: Update to work with Address model instead of deprecated CanvassLocation

  useEffect(() => {
    if (location && open) {
      form.setFieldsValue({
        firstName: location.firstName,
        lastName: location.lastName,
        address: location.address,
        unitNumber: location.unitNumber,
        supportLevel: location.supportLevel,
        sign: location.sign,
        signSize: location.signSize,
        notes: location.notes,
      });
    }
  }, [location, open, form]);

  const handleSave = async () => {
    if (!location) return;
    message.warning('Location editing temporarily disabled - needs Address model update');
    onClose();
    // TODO: Implement address update API call
  };

  return (
    <Drawer
      placement="bottom"
      open={open}
      zIndex={zIndex}
      onClose={onClose}
      height="auto"
      styles={{
        body: { padding: '12px 16px', maxHeight: '70vh', overflow: 'auto' },
      }}
      title="Edit Location"
      extra={
        <Button type="primary" size="small" onClick={handleSave}>
          Save
        </Button>
      }
    >
      <Form form={form} layout="vertical" size="small">
        <Form.Item name="firstName" label="First Name">
          <Input />
        </Form.Item>
        <Form.Item name="lastName" label="Last Name">
          <Input />
        </Form.Item>
        <Form.Item name="address" label="Address">
          <Input />
        </Form.Item>
        <Form.Item name="unitNumber" label="Unit">
          <Input />
        </Form.Item>
        <Form.Item name="supportLevel" label="Support Level">
          <Select
            options={supportLevelOptions}
            allowClear
            placeholder="Select..."
          />
        </Form.Item>
        <Form.Item name="sign" label="Sign" valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item name="signSize" label="Sign Size">
          <Select
            options={[
              { label: 'Regular', value: 'Regular' },
              { label: 'Large', value: 'Large' },
            ]}
            allowClear
            placeholder="Select..."
          />
        </Form.Item>
        <Form.Item name="notes" label="Notes">
          <Input.TextArea rows={2} />
        </Form.Item>
      </Form>
    </Drawer>
  );
}
