import { ComponentStory, ComponentMeta } from "@storybook/react";
import { BasicButtons, ButtonCustomProps } from "./Button";
export default {
  title: "Loqal/Atoms/Button",
  component: BasicButtons
} as ComponentMeta<typeof BasicButtons>;

export const Primary: ComponentStory<typeof BasicButtons> = () => <BasicButtons label="Simple B" variant="text" />

const Template: ComponentStory<typeof BasicButtons> = function (args) {
  return <BasicButtons {...args} />;
};
export const Primary: ComponentStory<typeof BasicButtons> = Template.bind({});
Primary.args = {
  label: "Simple B",
  variant: "text",
};
export const PrimaryTwo: ComponentStory<typeof BasicButtons> = Template.bind({});
PrimaryTwo.args = {
  ...Primary.args,
  label: "Simple Two",
};

export const SecondaryContained: ComponentStory<typeof BasicButtons> = Template.bind({});
SecondaryContained.args = {
  label: "Contained",
  variant: "contained",
};

export default {
  title: "Loqal/Molecules/DialogCard",
  component: SimpleDialogCard,
  argTypes: {
    content: { control: 'text' },
    typeTitle: {
      control: { type: "select", options: ["error", "warn", "info"] },
    },
    onClick: {  
      table: {
        disable: true,
      }
    },
    label: {
      table: {
        disable: true,
      },
    }
  },
} as ComponentMeta<typeof SimpleDialogCard>;

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    'storybook-react-i18next',
    "@storybook/addon-interactions"
  ],

function sleep(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}
export const AutomatedFormFilled: ComponentStoryObj<typeof DynamicForm>  = {
  args: {
    fieldsSchema: fieldsSchemaUserBasic,
    validationSchema: ValidationSchemaUserBasicInfo
  },
  play:  async ({ canvasElement }) => {
    // querying component from root element
    const canvas = within(canvasElement);
    userEvent.type(canvas.getByLabelText('Username'), 'jinanemehd');
    await sleep(200)
    userEvent.type(screen.getByLabelText('Email'), 'jinane@loqal.com');
    await sleep(200)
    userEvent.type(screen.getByLabelText('Password'), '123398bnjhbjh');
    await sleep(200)
    userEvent.click(canvas.getByRole('button'));
  }
}
const MainStepper = composeStory(MS, Meta);

describe("Testing Stepper Interraction", () => {
  const user = userEvent.setup()

  it('Check button enable to continue to ', async () => {
    const alertMock = jest.spyOn(window,'alert').mockImplementation();
    const { getByLabelText,getByTestId, container, debug  } = render(<MainStepper /> )

    // first step
    await user.type(getByLabelText(/username/i), 'John Doe')
    await user.type(getByLabelText(/email/i), 'john.doe@gmail.com')
    await user.type(getByLabelText(/password/i), 'John2021_')
    const ArrowNext = container.getElementsByClassName('stepper-rightIcon')
    expect(ArrowNext.length).toBe(0)
    await user.click(getByTestId('check-user'))
    waitFor(() => {
      expect(ArrowNext.length).toBe(1)
    })
    await user.click(getByTestId('stepper-rightIcon'))

     // second step
    await user.type(getByLabelText(/city/i), 'Bougival')
    await user.type(getByLabelText(/zipcode/i), '78380')
    await user.type(getByLabelText(/country/i), 'France')
    await user.click(getByTestId('check-adress'))

    //third step
    await user.click(getByTestId('stepper-rightIcon'))
    await user.click(getByTestId('submit'))
    await waitFor(() => {
      expect(alertMock)
        .toBeCalledWith(JSON.stringify({
          'username':'John Doe',
          "email": "john.doe@gmail.com",
          "password": "John2021_",
          "city": "Bougival",
          "zipcode": "78380",
          "country": "France",
          "contact": "0"
        }, null, 2))
    })
  })
});