import React from "react";
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { useState } from "react";

import Select from "./Select";

export default {
  // Title inside navigation bar
  title: "Select",
  // Component to test
  component: Select,
  // Clarifying the way how to process specific
  // properties of your component and which values
  // it can accept.
  argTypes: {},
} as ComponentMeta<typeof Select>;

/**
 * This is a way to define a tempalte for your component.
 *
 * This template should cover all the states.
 *
 * In most cases you should just distruct args attribute
 * on a returning component.
 */

const Template: ComponentStory<typeof Select> = (args) => {
  const { options = [{ name: String }] } = args;
  const [selected, setSelected] = useState(options[0]);
  return (
    <div>
      <Select<any>
        options={options}
        value={selected}
        onChange={setSelected}
        displayValueResolver={(options) => options.name}
      />
    </div>
  );
};

/* -------------------------------------------------------------------------- */
/*                          States of your component                          */
/* -------------------------------------------------------------------------- */

export const Default = Template.bind({});

Default.args = {
  options: [
    { name: "Wade Cooper" },
    { name: "Arlene Mccoy" },
    { name: "Devon Webb" },
    { name: "Tom Cook" },
    { name: "Tanya Fox" },
    { name: "Hellen Schmidt" },
  ],
};