import { useEditor } from "@/modules/editor";
import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
import { defineComponent } from "vue";
import { any } from "vue-types";
import { isEmpty } from "lodash";
import { css } from "@linaria/core";
import { bgColumns, layoutColumns } from "../../defines/createAttrsForm";
import {
  InputNumber,
  Button,
  Space,
  Tooltip,
  Select,
  Input,
} from "ant-design-vue";
import {
  BoldOutlined,
  ItalicOutlined,
  UnderlineOutlined,
  StrikethroughOutlined,
  AlignLeftOutlined,
  AlignCenterOutlined,
  AlignRightOutlined,
} from "@ant-design/icons-vue";
import { createColorOpts } from "../../defines/formOpts/createColorOpts";

const StyleButtons = defineComponent({
  setup() {
    return () => (
      <div class={ButtonsStyle}>
        <Tooltip title={"加粗"}>
          <Button icon={<BoldOutlined />} class={"active"} type="text"></Button>
        </Tooltip>
        <Tooltip title={"斜体"}>
          <Button icon={<ItalicOutlined />} type="text"></Button>
        </Tooltip>
        <Tooltip title={"下划线"}>
          <Button icon={<UnderlineOutlined />} type="text"></Button>
        </Tooltip>
        <Tooltip title={"删除线"}>
          <Button icon={<StrikethroughOutlined />} type="text"></Button>
        </Tooltip>
        <Tooltip title={"左对齐"}>
          <Button icon={<AlignLeftOutlined />} type="text"></Button>
        </Tooltip>
        <Tooltip title={"居中对齐"}>
          <Button icon={<AlignCenterOutlined />} type="text"></Button>
        </Tooltip>
        <Tooltip title={"右对齐"}>
          <Button icon={<AlignRightOutlined />} type="text"></Button>
        </Tooltip>
      </div>
    );
  },
});

const TextColumns: ColumnItem[] = [
  {
    label: "字体",
    dataIndex: "fontFamily",
    component: Select,
    props: {
      class: "w-full",
      options: [{ label: "默认字体", value: "" }]
        .concat
        // Object.entries(compMasks).map(([key, value]) => {
        //   return {
        //     label: value.name,
        //     value: key,
        //   };
        // })
        (),
    },
  },
  {
    label: "字号",
    dataIndex: "fontSize",
    component: InputNumber,
    props: {
      class: "w-full",
      min: 12,
      max: 99,
    },
  },
  {
    label: "颜色",
    dataIndex: "color",
    ...createColorOpts(),
  },
  {
    label: "",
    dataIndex: "style",
    component: StyleButtons,
  },
];

export const TextForm = defineComponent({
  props: {
    component: any<DesignComp>().isRequired,
  },
  setup(props) {
    const { actions } = useEditor();
    function changeVal(e: { dataIndex: string; value: any }) {
      actions.updateCompData(props.component, e.dataIndex, e.value);
    }
    return () => {
      const { component } = props;
      return (
        <div>
          <FormUI
            columns={TextColumns}
            data={{}}
            onChange={(v) => {
              console.log(v);
            }}
          />
          <div>布局</div>
          <div>
            <FormUI
              data={component}
              columns={layoutColumns}
              onChange={changeVal}
            />
            {!isEmpty(component?.layout?.background) ? (
              <>
                <div>背景</div>
                <FormUI
                  data={component}
                  columns={bgColumns}
                  onChange={changeVal}
                />
              </>
            ) : null}
          </div>
        </div>
      );
    };
  },
});
const ButtonsStyle = css`
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: @inf-form-bg;
  border-radius: 2px;
  .ant-btn {
    flex: 1;
    &.active {
      color: @inf-primary-color;
    }
  }
`;
const FormStyle = css``;
