import React from 'react';
import { Meta, Story } from '@storybook/react';
import ColorSwatch from '../storybookers/ColorSwatch';
import layouts from '../components/configs/layouts';

export default {
  title: 'Utils / Layouts',
  component: ColorSwatch, // not actually used, just need a placeholder
} as Meta;

const Template: Story<any> = (args) => <div>{args.children}</div>;

export const Container = Template.bind({});
Container.args = {
  children: (
    <div className={`bg-gray-100 p-4 text-center ${layouts.container}`}>
      {`
      HOTEL MANAGER Mr. Smith, quickly. I want that door open now! Stand over there!

      PETER We came, we saw, we kicked its **s!

      HOTEL MANAGER Did you see it? What is it?

      RAY We got it!

      HOTEL MANAGER What is it? Will there be any more of them?

      RAY Sir, what you have there is what we refer to as a focused, non-terminal repeating phantasm, or a Class Five full roaming vapor. Real nasty one, too!

      PETER Now, Let's talk seriously, now. For the entrapment, we're gonna have to ask you for four big ones. Four thousand dollars for that. But we are having a special this week on proton charging and storage of the beast, and that's only going to come to one thousand dollars, fortunately.

      HOTEL MANAGER Five thousand dollars? I had no idea it would be so much. I won't pay it.

      PETER Well, that's all right! We can just put it right back in there.

      RAY We certainly can, Dr. Venkman.

      HOTEL MANAGER No, no, no, no! All right! I'll pay anything!

      PETER Thanks so much.

      RAY Thank you! Hope we can help you again! All right, coming through! Watch out! Class Five full roaming vapor! Watch out!

      Begin musical montage. Music: Ghostbusters.
      `}
    </div>
  ),
};

export const AlignMiddle = Template.bind({});
AlignMiddle.args = {
  children: (
    <div
      className={`bg-gray-100 p-4 text-center h-screen ${layouts.alignMiddle}`}
    >
      <div className="text-center w-full bg-gray-300">
        It's right here, Ray. It's looking at me.
      </div>
    </div>
  ),
};

export const Margins = Template.bind({});
Margins.args = {
  children: (
    <div className="bg-gray-100 p-4 text-center h-screen flex flex-wrap">
      <div className={`w-full bg-indigo-700 ${layouts.margins.bottom}`}>
        Bottom
      </div>
      <div className="flex w-full justify-items-stretch">
        <div className={`bg-indigo-700 w-full ${layouts.margins.right}`}>
          Right
        </div>
        <div className={`bg-indigo-700 w-full ${layouts.margins.left}`}>
          Left
        </div>
      </div>
      <div className={`w-full bg-indigo-700 ${layouts.margins.top}`}>Top</div>
    </div>
  ),
};

export const Columns = Template.bind({});
Columns.args = {
  children: (
    <section>
      <div
        className={`bg-gray-100 p-4 text-center h-screen ${layouts.columns[2]} flex-wrap`}
      >
        <div className="bg-indigo-700 mb-5 md:mb-0">Two</div>
        <div className="bg-indigo-700">Two</div>
      </div>

      <div
        className={`bg-gray-100 p-4 text-center h-screen ${layouts.columns[3]} flex-wrap`}
      >
        <div className="bg-indigo-700 mb-5 md:mb-0">Three</div>
        <div className="bg-indigo-700 mb-5 md:mb-0">Three</div>
        <div className="bg-indigo-700">Three</div>
      </div>

      <div
        className={`bg-gray-100 p-4 text-center h-screen ${layouts.columns[4]} flex-wrap`}
      >
        <div className="bg-indigo-700 mb-5 md:mb-0">Four</div>
        <div className="bg-indigo-700 mb-5 md:mb-0">Four</div>
        <div className="bg-indigo-700 mb-5 md:mb-0">Four</div>
        <div className="bg-indigo-700">Four</div>
      </div>

      <div
        className={`bg-gray-100 p-4 text-center h-screen ${layouts.columns[6]} flex-wrap`}
      >
        <div className="bg-indigo-700 mb-5 md:mb-0">Six</div>
        <div className="bg-indigo-700 mb-5 md:mb-0">Six</div>
        <div className="bg-indigo-700 mb-5 md:mb-0">Six</div>
        <div className="bg-indigo-700 mb-5 md:mb-0">Six</div>
        <div className="bg-indigo-700 mb-5 md:mb-0">Six</div>
        <div className="bg-indigo-700">Six</div>
      </div>

      <div
        className={`bg-gray-100 p-4 text-center h-screen ${layouts.columns.grid}`}
      >
        <div
          className={`bg-amber-500  mb-5 md:mb-0 ${layouts.columns.sidebar}`}
        >
          Sidebar
        </div>
        <div className={`bg-indigo-700 mb-5 md:mb-0 ${layouts.columns.main}`}>
          Main
        </div>
      </div>

      <div
        className={`bg-gray-100 p-4 text-center h-screen ${layouts.columns.grid}`}
      >
        <div className={`bg-indigo-700 mb-5 md:mb-0 ${layouts.columns.main}`}>
          Main
        </div>
        <div className={`bg-amber-500 mb-5 md:mb-0 ${layouts.columns.sidebar}`}>
          Sidebar
        </div>
      </div>
    </section>
  ),
};