import React from "react";
import { Grid, Cell } from "@faceless-ui/css-grid";
import { Page } from "../../../payload-types";
import RichText from "../../RichText";
import { Gutter } from "../../Gutter";
import { CMSLink } from "../../Link";
import classes from "./index.module.scss";

type Props = Extract<Page["layout"][0], { blockType: "content" }>;

const Columns: React.FC<Props> = ({
  layout,
  columnOne,
  columnTwo,
  columnThree,
}) => {
  switch (layout) {
    case "oneColumn": {
      return (
        <Cell cols={9} colsM={4}>
          <RichText content={columnOne.richText} />
          {columnOne.enableLink && (
            <CMSLink className={classes.link} {...columnOne.link} />
          )}
        </Cell>
      );
    }

    case "halfAndHalf":
    case "twoThirdsOneThird": {
      let col1Cols = 6;
      let col2Cols = 6;

      if (layout === "twoThirdsOneThird") {
        col1Cols = 8;
        col2Cols = 4;
      }

      return (
        <React.Fragment>
          <Cell cols={col1Cols} colsM={4}>
            <RichText content={columnOne.richText} />
            {columnOne.enableLink && (
              <CMSLink className={classes.link} {...columnOne.link} />
            )}
          </Cell>
          <Cell cols={col2Cols} colsM={4}>
            <RichText content={columnTwo.richText} />
            {columnTwo.enableLink && (
              <CMSLink className={classes.link} {...columnTwo.link} />
            )}
          </Cell>
        </React.Fragment>
      );
    }

    case "threeColumns": {
      return (
        <React.Fragment>
          <Cell cols={4} colsM={4}>
            <RichText content={columnOne.richText} />
            {columnOne.enableLink && (
              <CMSLink className={classes.link} {...columnOne.link} />
            )}
          </Cell>
          <Cell cols={4} colsM={4}>
            <RichText content={columnTwo.richText} />
            {columnTwo.enableLink && (
              <CMSLink className={classes.link} {...columnTwo.link} />
            )}
          </Cell>
          <Cell cols={4} colsM={4}>
            <RichText content={columnThree.richText} />
            {columnThree.enableLink && (
              <CMSLink className={classes.link} {...columnThree.link} />
            )}
          </Cell>
        </React.Fragment>
      );
    }
    default:
      break;
  }

  return null;
};

export const ContentBlock: React.FC<Props> = (props) => {
  return (
    <Gutter className={classes.mediaBlock}>
      <Grid>
        <Columns {...props} />
      </Grid>
    </Gutter>
  );
};