<template>
  <div
    class="rounded shadow-md bg-white md:!py-5 md:!px-5 py-3 pb-4 lg:!text-sm mdlg:!text-[12px] text-xs px-4 flex flex-col lg:!w-[30%] mdlg:!w-[37%] md:!w-[50%] w-full"
    @click.stop="true"
  >
    <ts-header-text :size="'lg'" :customClass="' w-full text-center'">
      Add Work
    </ts-header-text>

    <div class="w-full py-3 mdlg:!px-3 px-0 grid grid-cols-12 gap-2">
      <div class="flex flex-col col-span-12">
        <ts-text-field
          placeholder="Hogwarts"
          custom-class="mdlg:px-3 px-2  border-[1px] rounded border-gray-200"
          paddings="py-3"
          :hasTitle="true"
          v-model="formData.institution"
        >
          <template v-slot:title> Instituition </template>
        </ts-text-field>
      </div>
      <div class="flex flex-col col-span-12">
        <ts-text-field
          placeholder="Chemistry Teacher"
          custom-class="mdlg:px-3 px-2  border-[1px] rounded border-gray-200"
          paddings="py-3"
          :hasTitle="true"
          v-model="formData.position"
        >
          <template v-slot:title> Position </template>
        </ts-text-field>
      </div>

      <div class="flex flex-col space-y-1 col-span-12">
        <ts-normal-text> Year </ts-normal-text>
        <div class="flex flex-row items-center space-x-2">
          <div class="flex flex-col flex-grow">
            <ts-text-field
              placeholder="From"
              custom-class="mdlg:px-3 px-2  border-[1px] rounded border-gray-200"
              paddings="py-3"
              :hasTitle="false"
              type="date"
              v-model="formData.from"
            >
            </ts-text-field>
          </div>
          <ts-icon :name="'dash'" :customClass="'h-[3px]'" />

          <div class="flex flex-col flex-grow">
            <ts-text-field
              placeholder="To"
              custom-class="mdlg:px-3 px-2  border-[1px] rounded border-gray-200"
              paddings="py-3"
              :hasTitle="false"
              v-model="formData.to"
              type="date"
            >
            </ts-text-field>
          </div>
        </div>
      </div>

      <div class="flex flex-col col-span-12">
        <ts-file-attachment
          placeholder="Upload file"
          v-model="formData.verification"
        >
          <template v-slot:title> Verification </template>
        </ts-file-attachment>
      </div>

      <div class="col-span-12 gap-2 grid grid-cols-12 pt-2">
        <ts-button
          :bgColor="'bg-white'"
          :padding="'px-4 py-3'"
          :customClass="'border-[1px] border-primaryPurple col-span-6'"
          :textColor="'text-primaryPurple'"
        >
          Cancle
        </ts-button>

        <ts-button
          :customClass="'border-[1px] border-primaryPurple col-span-6'"
          :padding="'px-4 py-3'"
          @click.stop="addWork()"
        >
          Done
        </ts-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import TsHeaderText from "../TsTypography/headerText.vue";
import TsNormalText from "../TsTypography/normalText.vue";
import TsTextField from "../TsForm/textField.vue";
import TsFileAttachment from "../TsForm/fileAttachment.vue";
import TsIcon from "../TsIcon/index.vue";
import TsButton from "../TsButton/index.vue";
import { Logic } from "tutorstack-frontend-logic";

export default {
  components: {
    TsHeaderText,
    TsFileAttachment,
    TsTextField,
    TsNormalText,
    TsIcon,
    TsButton,
  },
  props: {},
  name: "TsAddWork",
  setup() {
    const formData = Logic.users.tutors.CreateWorkForm;

    const addWork = () => {
      formData.to = Logic.common.dateToMilliseconds(formData.to.toString());
      formData.from = Logic.common.dateToMilliseconds(formData.from.toString());
      Logic.users.tutors.CreateTutorWork(true);
    };

    return {
      formData,
      addWork,
    };
  },
};
</script>
