import { useState } from 'react';
import { Button, GetData, PostData } from '../index';

const meta = {
  title: 'Utils / Data',
  component: <Button />,
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const Template = (args) => {
  const [data, dataSetter] = useState(null);

  return (
    <div>
      <Button title={args.title} callback={args.callback} />
    </div>
  );
};

export const Get = Template.bind({});
Get.args = {
  url: 'https://api.restful-api.dev/objects',
  title: 'Get Data via Ajax',
  data: null,
  callback: async () => {
    const d = await GetData(Get.args.url);
    alert(JSON.stringify(d.data, null, 2));
  },
};

export const Post = Template.bind({});
Post.args = {
  url: 'https://api.restful-api.dev/objects',
  title: 'Send Data via Ajax',
  data: {
    name: 'Apple MacBook Pro 16',
    data: {
      year: 2019,
      price: 1849.99,
      'CPU model': 'Intel Core i9',
      'Hard disk size': '1 TB',
    },
  },
  callback: async () => {
    const d = await PostData(Post.args.url, Post.args.data);
    alert(JSON.stringify(d.data, null, 2));
  },
};