import type { Story, Meta } from '@storybook/react';

import { Tenant } from './tenant';
import type { TenantProps } from './tenant';

export default {
  component: Tenant,
  title: 'Table/In Cells/Company Name',
  argTypes: {
    title: {
      description: 'Title of the component.'
    },
    subtitle: {
      description: 'Subtitle of the component.',
      table: {
        defaultValue: {
          summary: ''
        }
      }
    },
    companyStatusProps: {
      description:
        'Props which will be passed to the colored text with bg component.'
    },
    companyIconProps: {
      description: 'Props which will be passed to the company icon component.'
    },
    subTexts: {
      description: 'List of subtexts, will override subtitle.',
      table: {
        defaultValue: {
          summary: '[]'
        }
      }
    },
    classes: {
      describe: 'Override classes.'
    }
  }
} as Meta;

const Template: Story<TenantProps> = (args) => <Tenant {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  title: 'Title',
  companyIconProps: {
    domain: 'https://xd.adobe.com/',
    badgeProps: {
      badgeContent: (
        <img
          src="https://res.cloudinary.com/dmbi4u5ho/image/upload/v1622983118/moldova_ucbxye.svg"
          // Add correct country name in 'alt'
          alt="flag"
          width="16px"
          height="16px"
        />
      )
    }
  },
  companyStatusProps: {
    content: 'Active',
    colorObj: {
      backgroundColor: '#E2F9F4',
      color: '#44D7B6'
    }
  },
  subTexts: ['One', 'Two', 'Three']
};

export const SingleSubText = Template.bind({});
SingleSubText.args = {
  ...Primary.args,
  subtitle: 'Details',
  subTexts: []
};