import { Card, Button, Input, Row, Col } from 'antd';
import React, { useState, useCallback } from 'react';
import { usePush } from 'tipple';

export const AddPost = () => {
  const [body, setBody] = useState<any>({ author: 'user', title: '' });
  const [response, addPost, clearResponse] = usePush('/posts', {
    domains: ['posts'],
    fetchOptions: { method: 'POST', body: JSON.stringify(body) },
  });

  const handleInput = useCallback(
    (e: any) => setBody({ ...body, title: e.target.value }),
    [body]
  );

  if (response.data !== undefined) {
    clearResponse();
    setBody({ author: 'user', title: '' });
  }

  const handleKeyDown = useCallback(
    event => {
      if (event.key === 'Enter') {
        addPost();
      }
    },
    [addPost]
  );

  return (
    <Row>
      <Card>
        <Row gutter={8}>
          <Col span={19}>
            <Input
              placeholder={'Enter a post'}
              value={body.title}
              onChange={handleInput}
              onKeyDown={handleKeyDown}
            />
          </Col>
          <Col span={5}>
            <Button type="primary" onClick={addPost}>
              Add post
            </Button>
          </Col>
        </Row>
      </Card>
    </Row>
  );
};