import { UnorderedListOutlined } from "@ant-design/icons";

export const inlineFormRowTitleStyles = Object.freeze({
  input: Object.freeze({
    background: "transparent",
    border: "none",
    borderRadius: 0,
    boxShadow: "none",
    paddingInline: 0,
    paddingBlock: 0,
    lineHeight: 1.35,
    flex: "1 1 auto",
    minWidth: 0,
    width: "100%"
  }),
  row: Object.freeze({
    display: "flex",
    gap: 6,
    flexWrap: "wrap",
    alignItems: "center",
    width: "100%",
    paddingInline: 4
  }),
  group: Object.freeze({
    display: "flex",
    alignItems: "center",
    gap: 8,
    paddingInline: 8,
    paddingBlock: 4,
    borderRadius: 10,
    border: "1px solid var(--imex-form-title-group-border)",
    background: "var(--imex-form-title-group-bg)",
    minWidth: 0,
    flex: "1 1 0"
  }),
  label: Object.freeze({
    color: "var(--ant-color-text-secondary)",
    fontSize: 12,
    fontWeight: 600,
    lineHeight: 1,
    whiteSpace: "nowrap",
    paddingInline: 6,
    paddingBlock: 3,
    borderRadius: 999,
    border: "1px solid var(--imex-form-title-label-border)",
    background: "var(--imex-form-title-label-bg)"
  }),
  handle: Object.freeze({
    color: "var(--ant-color-text-tertiary)",
    fontSize: 14,
    flex: "0 0 auto",
    marginRight: 2
  }),
  separator: Object.freeze({
    width: 1,
    height: 16,
    background: "color-mix(in srgb, var(--imex-form-surface-border) 58%, transparent)",
    borderRadius: 999,
    flex: "0 0 auto",
    marginInline: 2
  }),
  text: Object.freeze({
    whiteSpace: "nowrap",
    fontWeight: 500,
    fontSize: "var(--ant-font-size-lg)",
    lineHeight: 1.2
  })
});

export const INLINE_TITLE_INPUT_STYLE = inlineFormRowTitleStyles.input;
export const INLINE_TITLE_ROW_STYLE = inlineFormRowTitleStyles.row;
export const INLINE_TITLE_GROUP_STYLE = inlineFormRowTitleStyles.group;
export const InlineTitleListIcon = UnorderedListOutlined;
export const INLINE_TITLE_SWITCH_GROUP_STYLE = Object.freeze({
  ...inlineFormRowTitleStyles.group,
  flex: "0 0 auto"
});
export const INLINE_TITLE_LABEL_STYLE = inlineFormRowTitleStyles.label;
export const INLINE_TITLE_HANDLE_STYLE = inlineFormRowTitleStyles.handle;
export const INLINE_TITLE_SEPARATOR_STYLE = inlineFormRowTitleStyles.separator;
export const INLINE_TITLE_TEXT_STYLE = inlineFormRowTitleStyles.text;

export const INLINE_FORM_ROW_WRAP_TITLE_STYLES = Object.freeze({
  title: Object.freeze({
    whiteSpace: "normal",
    overflow: "visible",
    textOverflow: "unset"
  })
});