/**
 * External dependencies
 */
import styled from "@emotion/styled";

/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import { TextControl } from "@wordpress/components";

/**
 * Internal dependencies
 */
import { LabelControl, GroupControl } from "sdk/components";
import { labels } from "../../utils/labels";

/**
 * Add style to GroupControl
 */
const GroupControlStyle = styled(GroupControl)`
  .boldblocks-group-control__body {
    > * {
      flex-basis: 50%;
    }
  }

  &.grid-column-control {
    .boldblocks-group-control__body {
      > :last-child {
        flex-basis: 100%; // Make the order control full width
      }
    }
  }
`;

export const GridColumnLabel = __(
  "Column start, span & order",
  "content-blocks-builder",
);
export const GridRowLabel = __("Row start, span", "content-blocks-builder");

/**
 * Grid item size and location
 *
 * @param {Object}
 * @returns
 */
export const SizeLocationControl = ({
  values,
  onChange,
  label,
  isColumn = false,
}) => {
  const fields = [
    {
      name: "start",
      label: __("Start", "content-blocks-builder"),
      type: "number",
      min: -1,
      step: 1,
      placeholder: labels.auto,
    },
    {
      name: "span",
      label: __("Span", "content-blocks-builder"),
      type: "number",
      min: -1,
      step: 1,
      placeholder: labels.auto,
    },
  ];
  if (isColumn) {
    fields.push({
      name: "order",
      label: __("Order", "content-blocks-builder"),
      type: "number",
      min: -1,
      step: 1,
      placeholder: labels.auto,
    });
  }
  return (
    <GroupControlStyle
      label={label}
      renderLabel={({ label }) => {
        return <LabelControl label={label} isResponsive={true} />;
      }}
      className={isColumn ? "grid-column-control" : ""}
      renderControl={({ label, value, onChange, ...otherProps }) => (
        <TextControl
          label={label}
          value={value}
          onChange={onChange}
          {...otherProps}
        />
      )}
      isLinkedGroup={false}
      fields={fields}
      values={values}
      onChange={onChange}
      columns={isColumn ? 3 : 2}
    />
  );
};
