import React from 'react';
import { StoryFn, Meta } from '@storybook/react';
import { useOverlayTriggerState } from 'react-stately';
import { useOverlayTrigger } from 'react-aria';

import { PreviewPanel } from './PreviewPanel';
import { Icon, IconOptions } from '../Icons/Icon';

export default {
  title: 'Preview Panel',
  component: PreviewPanel,
} as Meta<typeof PreviewPanel>;

const MatrixResource = ({ resource: { name, type } }) => {
  return (
    <div>
      <div className="flex flex-col items-center text-gray-800 mt-7 mx-5 pb-4 border-b border-gray-300">
        <Icon icon={type.code as IconOptions} resourceSource="matrix" className="w-14 h-14" />
        <div className="mt-4 font-semibold text-base">{name}</div>
      </div>
    </div>
  );
};

const Template: StoryFn<typeof PreviewPanel> = ({ resource, allowedTypes }) => {
  const previewModalState = useOverlayTriggerState({});
  const { overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);

  return (
    <PreviewPanel
      resource={resource}
      modalState={previewModalState}
      previewModalOverlayProps={overlayProps}
      allowedTypes={allowedTypes}
      onSelect={({ id, name }) => alert(`Resource Selected: ${id} - ${name}`)}
      onClose={() => alert(`OnClose Selected`)}
      ResourceComponent={MatrixResource}
    />
  );
};

export const Primary = Template.bind({});
Primary.args = {
  resource: {
    id: '1',
    name: 'Products',
    type: {
      code: 'page_standard',
      name: 'Standard Page',
    },
    status: {
      code: 'live',
      name: 'Live',
    },
    url: 'http://my-squiz.net/assets/1',
    urls: [],
    childCount: 0,
  },
  allowedTypes: undefined,
};

export const NoSelected = Template.bind({});
NoSelected.args = {
  ...Primary.args,
  resource: null,
};