import { useProp, h } from 'atomico';
import { Option } from 'funfix';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';
import '@caedman/gs/dist/global-style';
import './kun-icon.js';
import './chunks/a234fa33.js';
import './kun-image-or-default.js';
import '@caedman/kit/dist/use-stylesheet';
import 'lazyload-image';
import './kun-image.js';
import 'dayjs';
import { getKunImageUrl } from './kun-chat-message.js';
import './kun-checkbox.js';
import 'purify-ts/es/Maybe';
import 'lodash/get';
import './kun-dropdown.js';
import { R as ROUTES } from './chunks/ee2fcfaa.js';
import exec from '@caedman/spring/build/exec';
import { requestUpdateLearningPlan } from '@caedman/seek-api/build/api/update-learning-plan';

var style = ".series-img {\n  width:101px;\n  height:134px;\n  border-radius:10px;\n}\n\n.series-item-container {\n  padding: 12px 20px;\n  display: flex;\n  justify-content: space-between;\n}\n\n.series-item-left {\n  display: flex;\n  flex-direction: row;\n}\n\n.series-detail {\n  margin-left: 8px;\n}\n\n.series-title {\n  font-size:23px;\n  font-weight:800;\n  color:rgba(28,29,32,1);\n  line-height:31px;\n}\n\n.description {\n  color:rgba(185,185,185,1);\n}\n\n.series-tags {\n  margin: 10px 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.series-tag {\n  margin-right: 4px;\n  height: 28px;\n  display: block;\n  overflow: hidden;\n  background:rgba(255,148,52,0.07);\n  border-radius:6px;\n  padding: 0 10px ;\n  color:rgba(255,148,52,1);\n  font-size:13px;\n  line-height: 28px;\n}\n\n.learn-plan-setting {\n  display: flex;\n  width: 200px;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-end;\n}\n\n.learn-by-day-text {\n  width: 100px;\n}\n\n.learn-by-day {\n  align-items: center;\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: flex-end;\n}\n";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-learning-series/kun-learning-series.tsx";
const learnCountOptions = [{ value: 1 }, { value: 4 }, { value: 5 }].map((item) => ({ ...item, label: `每天学习${item.value}个` }));
const KunLearningSeries = () => {
  const [item, setItem] = useProp("item");
  // const [seriesCover] = useProp<string>("seriesCover");
  const [tags] = useProp("tags");
  const newTags = Option.of(tags).getOrElse([]);
  // const redirect = useRedirect();

  // const [state, setState] = useState<DailyItem>({
  //   inPlan: props.inPlan,
  //   dailyCount: props.dailyCount,
  // });

  // useEffect(() => {
  //   window.addEventListener("MyChecked", (e) => {
  //   });
  //   window.addEventListener("OnMyChecked", (e) => {
  //   });
  //   return () => {};
  // }, []);

  const onSelect = async (event) => {
    const count = event.detail;

    setItem({
      ...item,
      dailyCount: count.value,
      isInPlan: true,
    });

    await exec(async () => requestUpdateLearningPlan({
      dailyCount: count.value,
      learningPlan: true,
      seriesId: item.seriesId,
    }));
  };
  console.log("item", item);
  // const updateLearningPlan = async (data) => {
  //   // const updatePlan = requestUpdateLearningPlan(data);
  //   // // await execWithCallback(() => {
  //   // }, updatePlan, () => {
  //   //   toastrMsg("操作成功");
  //   // });
  // };

  // const changeCheck = async (value) => {
  //   console.log("changeCheck", value);
  //   const newState = produce(state, (draft: Draft<DailyItem>) => {
  //     draft.inPlan = true;
  //   });
  //   const data = {
  //     dailyCount: newState.dailyCount,
  //     seriesId: props.seriesId,
  //     learningPlan: newState.inPlan,
  //   };
  //   setState(newState);
  //   // await updateLearningPlan(data);
  // };

  // const chaneValue = async (data) => {
  //   const r = data.detail.selectedOption;
  //   const newState = {
  //     ...state,
  //     dailyCount: parseInt(r.value, 10),
  //   };
  //
  //   const data1 = {
  //     dailyCount: newState.dailyCount,
  //     seriesId: props.seriesId,
  //     learningPlan: newState.inPlan,
  //   };
  //   setState(newState);
  //   // await updateLearningPlan(data1);
  // };

  const goToSeriesDetail = (id) => {
    window.open(`${ROUTES.S}?s=${id}`, "_blank");
  };

  return (
    h('host', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 97}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 98}}, style)

      , h('div', { className: "series-item-container", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 100}}
        , h('div', { className: "series-item-left", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 101}}
          , h('div', { className: "series-img", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 102}}
            , h('kun-image-or-default', { url: getKunImageUrl(item.seriesCover), width: 100, height: 100, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 103}} )
          )

          , h('div', { className: "series-detail", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 106}}
            , h('div', { className: "series-title hover:underline cursor-pointer"  , onclick: () => goToSeriesDetail(item.seriesId), role: "presentation", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 107}}
              , item.seriesName
            )
            , h('div', { className: "series-tags", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 110}}
              , 
                  newTags.map((r) => h('span', { className: "series-tag", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 112}}, r))
                
            )

            , h('span', { className: "description", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 116}}
              , item.cardCount, "个卡片 |  "

              , " "
              , item.learnCount
              , " ", "已学 |  "


              , " "
              , item.subscriptionCount, "成员"

            )
          )
        )

        , h('div', { className: "flex flex-col justify-start align-bottom items-end"    , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 131}}
          , h('div', { className: "flex inline-flex justify-end items-center mb-4"    , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 132}}
            , h('kun-checkbox', {
              checked: item.isInPlan,
              onMyChecked: async (evt) => {
                const inPlan = evt.detail.checked;
                setItem({
                  ...item,
                  isInPlan: inPlan,
                });
                await exec(() => requestUpdateLearningPlan({
                  dailyCount: item.dailyCount,
                  learningPlan: inPlan,
                  seriesId: item.seriesId,
                }));
              }, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 133}}
            )
            , h('span', { className: "flexfont-medium ml-2" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 148}}, "添加到学习计划")
          )

          , 
            item.isInPlan && (
            h('kun-dropdown', { options: learnCountOptions, kunWidth: 140, optionMapper: ["label"], value: { value: item.dailyCount, label: `每天学习${item.dailyCount}个` }, onMySelect: onSelect, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 153}} )
            )
          
        )
      )
    )
  );
};

KunLearningSeries.props = {
  item: {
    type: Object,
  },
  tags: {
    type: Array,
    value: [],
  },
};

var kunLearningSeries = getComponentOrDefine("kun-learning-series", KunLearningSeries);

export default kunLearningSeries;
