import { ArgsTable, Meta, Canvas, Story } from "@storybook/addon-docs";

import RoviCard from "./index.vue";
import RoviButton from "../Button";
import RoviTag from "../Tags";
import Typography from "../Typography";

import { generateSource } from "../../../../.storybook/utils";

import {
  ContentWrapper,
  Column,
  Row,
  HorizontalSpacer,
} from "../Helpers/styles";

import {
  mainColors,
  colorPalette,
  colorGuide,
  fontNameSpaces,
  getButtonConfig,
} from "../../primitives";

<Meta title="Components/Card" component={RoviCard} />

export const Template = (args, { argTypes }) => ({
  props: Object.keys(args),
  components: {
    RoviCard,
    ContentWrapper,
    Column,
    Row,
    HorizontalSpacer,
    "rovi-tag": RoviTag,
    "rovi-button": RoviButton,
    Typography,
  },
  setup() {
    return { args };
  },
  computed: {
    fontNameSpaces() {
      return fontNameSpaces;
    },
    mainColors() {
      return mainColors;
    },
    colorPalette() {
      return colorPalette;
    },
  },
  template: `<rovi-card v-bind="args">
<ContentWrapper>
<Column>
  <Row class="v-justify">
    <div>
      <Typography
        :color="mainColors.white"
        v-bind="fontNameSpaces.tc12b"
      >
        SBI Bank
      </Typography>
      <HorizontalSpacer :n="2" />
      <Typography
        color="white"
        overflow="ellipsis"
        v-bind="fontNameSpaces.tb11m"
      >
        7834 5647 8736
      </Typography>
    </div>
    <Row class="h-center v-center">
      </div>
    </Row>
  </Row>
  <HorizontalSpacer :n="8" />
  <div>
    <rovi-tag>
      Due Today
    </rovi-tag>
  </div>
  <HorizontalSpacer :n="2"/>
  <Typography>
    ₹1000.00
  </Typography>
  <HorizontalSpacer :n="8"/>
  <rovi-button kind="elevated" showArrow fullWidth>
    Pay Now
  </rovi-button >
</Column>
</ContentWrapper>
  </rovi-card>`,
});

# ElevatedCard

Card component with plunks at right & bottom edges. Just wrap your card-content inside ElevatedCard component to make it elevated.

## Usage

- Button component decides text color, background color, edge colors, and border color based on the `variant`, `kind`, and `colorMode` props.
- Spacing of the button - height, padding, icon height (if any icon is passed) is decided by the `size` prop.
- Text style of the button is also decided by the `size` prop.
- Button component is super flexible as it supports these configs:
  - `colorConfig` prop for all the colors
  - `spacingConfig` prop for - height, iconHeight, and padding
  - `textStyle` for custom textStyle - fontWeight, fontSize, fontType

<Canvas style={{ background: "#0d0d0d" }}>
  <Story
    name="Introdution"
    args={{
      backgroundColor: "#AE275F",
      edgeColors: {
        bottom: "#5C1532",
        right: "#851E49",
      },
      customStyle: {
        width: "230px",
        color: "#fff",
      },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

```jsx
...Documentation will be written here...
```

## Props

<div style={{overflowX: 'auto'}}>

| prop              | description                                     | type            |
| ----------------- | ----------------------------------------------- | --------------- |
| `edgeColors`      | color configs of right & bottom plunk           | `object`        |
| `backgroundColor` | card background color                           | `string`        |
| `style`           | inline css styles                               | `CSSProperties` |
| `fullWidth`       | if true, card takes full-width of the container | `boolean`       |

</div>