import { useEffect, useState } from 'react';
import Form from 'antd/es/form';
import InputNumber from 'antd/es/input-number';
import Button from 'antd/es/button';
import Typography from 'antd/es/typography';
import message from 'antd/es/message';
import Card from 'antd/es/card';
import { fetchAdminSettings, updateAdminSettings } from './adminSettingsApi';

const { Title, Text } = Typography;

export default function Settings() {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchAdminSettings()
      .then(s => {
        form.setFieldsValue({ cartExpiryHours: s.cartExpiryHours });
      })
      // A rejection here used to leave the form spinning indefinitely.
      .catch(() => message.error('Could not load settings'))
      .finally(() => setLoading(false));
  }, [form]);

  async function handleSave() {
    const values = await form.validateFields();
    await updateAdminSettings(values);
    message.success('Settings saved');
  }

  return (
    <Card style={{ maxWidth: 480 }}>
      <Title level={4}>Cart Settings</Title>
      <Text type="secondary">
        How long an item stays reserved in a customer's cart before it's automatically released back to available inventory.
      </Text>
      <Form form={form} layout="vertical" style={{ marginTop: 16 }} disabled={loading}>
        <Form.Item name="cartExpiryHours" label="Cart expiry (hours)" rules={[{ required: true }]}>
          <InputNumber min={0.5} step={0.5} style={{ width: '100%' }} />
        </Form.Item>
        <Button type="primary" onClick={handleSave} loading={loading}>Save</Button>
      </Form>
    </Card>
  );
}