import * as _ from 'lodash-es';
import { 
  Fragment,
  useCallback,
  useEffect,
  useState
} from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { HeaderNavigation } from '@/widgets/navigation/header';
import { FooterNavigation } from '@/widgets/navigation/footer';
import { PullToRefresh } from '@/widgets/pull-to-refresh/pull-to-refresh';
import { 
  CodeListItem, 
  CodesSelectParams, 
  CodesSelectPostResponse, 
  HeaderType 
} from '@/entities/common/model/types';
import { useHomeGroupsMutation } from '@/entities/home/api/use-home-groups-mutation';
import { useUserInfo } from '@/entities/user/lib/use-user-info';
import { useAppBridge } from '@/hooks';
import { useDetailOnStore, useFavoriteEditOnStore, useMenuOnStore, useStore } from '@/shared/model/store';
import { HomeGroupsParams, HomeGroupsResponse } from '@/entities/home/model/types';
import { 
  BusinessPropertyParams, 
  BusinessPropertyResponse, 
  LoginResponse, 
  MenuGrantsItem, 
  ShortcutUserParams, 
  ShortcutUserResponse, 
  UserFindAuthMethodParams   
} from '@/entities/user/model/types';
import { useShortcutUserMutation } from '@/entities/user/api/use-shortcut-user-mutation';
import { useShortcutDefaultMutation } from '@/entities/user/api/use-shortcut-detault-mutation';
import { useBusinessPropertyMutation } from '@/entities/user/api/use-business-property-mutation';
import { useUserFindAuthMethodMutation } from '@/entities/user/api/use-user-find-authmethod-mutation';
import { useCodesSelectMutation } from '@/entities/common/api/use-codes-select-mutation';
import { MenuItems } from '@/entities/common/model/constant';
import { AlarmLinkOptions } from '@/entities/alarm/model/types';
import { AlarmRoutes } from '@/entities/alarm/ui/alarm-routes';
import { useNavigate } from '@/shared/lib/hooks';

export interface ContextType {
  setOnBack: (onBack: () => void) => void;
  setOnRightClick: (onRightClick: () => void) => void;
  setHeaderTitle: (title: string) => void;
  setIsPullToRefreshEnabled: (enabled: boolean) => void;
  setMenuOn: (menuOn: boolean) => void;
  setHeaderType: (headerType: HeaderType) => void;
  setFooterMode: (footerMode: boolean) => void;
  setFooterCurrentPage: (footerCurrentPage?: string | null) => void;
  setFavoriteEdit: (favoriteEdit?: boolean) => void;
};

export interface CallCodesSelectProps {
  codeCl: string;
  code1Filter?: Array<any>;
};
export interface OnSetCommonCodesProps {
  data: Array<CodeListItem>;
  codeCl: string;
  code1Filter?: Array<any>;
};

export const SubLayout = () => {
  const { 
    callLogin,
    updateUserData
  } = useUserInfo();

  const { reload, navigateBack } = useNavigate();
  const { menuOn, setMenuOn } = useMenuOnStore();
  const { favoriteEditOn, setFavoriteEditOn } = useFavoriteEditOnStore();
  const { detailOn, setDetailOn } = useDetailOnStore();

  const location = useLocation();
  console.log(location)

  const [isPullToRefreshEnabled, setIsPullToRefreshEnabled] = useState(false);
  const [onBack, setOnBack] = useState(undefined);
  const [onRightClick, setOnRightClick] = useState(undefined);
  const [headerTitle, setHeaderTitle] = useState<string>('');
  const [headerType, setHeaderType] = useState<HeaderType>(HeaderType.NoHeader);
  const [footerMode, setFooterMode] = useState<boolean>(false);
  const [footerCurrentPage, setFooterCurrentPage] = useState<undefined | string | null>(undefined);
  const [headerNavigationKey, setHeaderNavigationKey] = useState<number>(1);
  const [loginSuccess, setLoginSuccess] = useState<boolean>(false);
  const [mid, setMid] = useState<string>();
  const [alarmRoutesOn, setAlarmRoutesOn] = useState<boolean>(false);
  const [alarmOptions, setAlarmOptions] = useState<AlarmLinkOptions>();

  const { isNativeEnvironment } = useAppBridge();
  const { mutateAsync: homeGroups } = useHomeGroupsMutation();
  const { mutateAsync: codesSelect} = useCodesSelectMutation();
  const { mutateAsync: shortcutUser } = useShortcutUserMutation();
  const { mutateAsync: shortcutDefault } = useShortcutDefaultMutation();
  const { mutateAsync: businessProperty } = useBusinessPropertyMutation();
  const { mutateAsync: findAuthMethod } = useUserFindAuthMethodMutation();

  const wrapperClassName = 'wrapper';
  
  const callHomeGroups = () => {
    let userInfo = useStore.getState().UserStore.userInfo;
    let params: HomeGroupsParams = {
      userid: userInfo.usrid
    };
    homeGroups(params).then((rs: HomeGroupsResponse) => {
      useStore.getState().UserStore.setUserMids(rs.mids);
      if(!!rs.mids[0]){
        useStore.getState().UserStore.setMid(rs.mids[0]);
        setMid(rs.mids[0]);
      }
      let options: Array<Record<string, string>> = rs.mids.map((value, index) => {
        return {
          name: value,
          value: value
        };
      });
      useStore.getState().UserStore.setSelectOptionsMids(options);

      let options2 = _.cloneDeep(options);
      options2.sort((a: Record<string, any>, b: Record<string, any>) => {
        if(a.value.toLowerCase() > b.value.toLowerCase()) return 1;
        else if(a.value.toLowerCase() < b.value.toLowerCase()) return -1;
        else return 0;
      });
      let optionsWithoutGids = options2.filter((value: Record<string, any>, index: number) => {
        let last = value.value.slice(-1); 
        return last.toLowerCase() !== 'g';
      });
      useStore.getState().UserStore.setSelectOptionsMidsWithoutGids(optionsWithoutGids);
      
      setLoginSuccess(true);
      setHeaderNavigationKey(headerNavigationKey + 1);
    }).catch((e: any) => {
      console.error(e);
    });
  };

  const callBusinessProperty = () => {
    if(!!mid){
      let params: BusinessPropertyParams = {
        mid: mid
      };
      businessProperty(params).then((rs: BusinessPropertyResponse) => {
        useStore.getState().UserStore.setBusinessInfo(rs);
      }).catch((e: any) => {
        console.error(e);
      });
    }
  };

  const callSortcutDefault = () => {
    let userInfo = useStore.getState().UserStore.userInfo;
    if(userInfo.usrid){
      let params: ShortcutUserParams = {
        usrid: userInfo.usrid,
      };
      shortcutDefault(params).then((rs: ShortcutUserResponse) => {
        const modifiedShortcuts = rs.shortcuts.map(shortcut => ({
          ...shortcut,
          iconFilePath: `/images/menu_icon_${shortcut.menuId}.svg`,
          programPath: getProgramPath(shortcut.menuId)
        }));

        useStore.getState().UserStore.setUserFavorite(modifiedShortcuts);
      }).catch((e: any) => {
        console.error(e);
      });
    }
  };

  // 맵 형태로 상수로 만들어 놓을 필요가 있다. 무의미한 반복문 너무 많이 사용
  const getProgramPath = (menuId: number) => {
    let programPath: string = '';
    Loop1:
    for(let i=0;i<MenuItems.length;i++){
      let menuItem = MenuItems[i];
      if(menuItem){
        let subMenu = menuItem.subMenu;
        if(subMenu){
          Loop2:
          for(let j=0;j<subMenu.length;j++){
            let subMenuItem = subMenu[j];
            if(subMenuItem){
              if(subMenuItem.menuId === menuId){
                programPath = subMenuItem.programPath;
                break Loop1;
              }
            }
          }
        }
      }
    }
    return programPath;
  };

  const callShortcutUser = () => {
    let userInfo = useStore.getState().UserStore.userInfo;
    if(userInfo.usrid){
      let params: ShortcutUserParams = {
        usrid: userInfo.usrid
      };
      shortcutUser(params).then((rs: ShortcutUserResponse) => {
        if(!rs.usingDefault && rs.shortcuts){
          if(rs.shortcuts.length > 0){
            const modifiedShortcuts = rs.shortcuts.map(shortcut => ({
              ...shortcut,
              iconFilePath: `/images/menu_icon_${shortcut.menuId}.svg`,
              programPath: getProgramPath(shortcut.menuId)
            }));
            useStore.getState().UserStore.setUserFavorite(modifiedShortcuts);
          }
          else if(!!rs.usingDefault){
            callSortcutDefault();
          }
        }
      }).catch((e: any) => {
        console.error(e);
      });
    }
    
  };

  const callFindAuthMethod = () => {
    let userInfo = useStore.getState().UserStore.userInfo;
    if(!!userInfo.usrid && !! mid){
      let params: UserFindAuthMethodParams = {
        usrid: userInfo.usrid,
        mid: mid
      };
      findAuthMethod(params).then((rs: any) => {
        let emails = rs.emails.map((value: any, index: any) => {
          return value.content;
        });
        useStore.getState().UserStore.setUserEmails(emails);
        let options: Array<Record<string, string>> = emails.map((value: any, index: any) => {
          return {
            name: value,
            value: value
          };
        });
        useStore.getState().UserStore.setSelectOptionsEmails(options);
        if(!!emails[0]){
          useStore.getState().UserStore.setEmail(emails[0]);
        }
      }).catch((e: any) => {
        console.error(e);
      });
    }
    
  };
    
  const handleLogin = useCallback(async () => {
    let userParmas;
    if(!isNativeEnvironment){
      userParmas = {
        id: 'nictest00',
        password: 'nictest00'
      };
      // userParmas = {
      //   id: 'woowahan5',
      //   password: 'nictest00'
      // };

    }
    callLogin(userParmas).then(() => {
      callHomeGroups();
      callShortcutUser();

      callCodesSelect({ codeCl: '0001' });
      callCodesSelect({ codeCl: '0002' });

      let filter0022: Array<string> = ['01', '02', '03', '05', '14', '21', '24', '26', '31'];
      callCodesSelect({
        codeCl: '0022', 
        code1Filter: filter0022
      });
      callCodesSelect({ codeCl: '0325' });
      callCodesSelect({ codeCl: '0074' });
      onSetGrant();
    }).catch((error: any) => {
      setLoginSuccess(false);
    });
  }, []);

  const callCodesSelect = ({
    codeCl, 
    code1Filter
  }: CallCodesSelectProps) => {
    let params: CodesSelectParams = {
      codeCl: codeCl,
      useCl: 0,
      method: 'post'
    };
    
    codesSelect(params).then((rs: CodesSelectPostResponse) => {
      if(rs){
        onSetCommonCodes({
          data: rs.codeList, 
          codeCl: codeCl, 
          code1Filter: code1Filter
        });
      }
    }).catch((e: any) => {
      console.error(e);
    });
  };

  const onSetGrant = () => {
    let userInfo = useStore.getState().UserStore.userInfo;
    const menuGrants = userInfo.menuGrants;
    let grantObj: Record<string, Array<string>> = {};
    let grantKeys = [8, 4, 2, 1];
    if(!!menuGrants){
      for(let i=0;i<menuGrants.length;i++){
        let menuGrantItem = menuGrants[i];
        if(menuGrantItem){
          let menuId: number = menuGrantItem.menuId;
          let grant: number = menuGrantItem.grant;
          if(!grantObj.hasOwnProperty(''+menuId)){
            grantObj[''+menuId] = [];
          }
          for(let j=0;j<grantKeys.length;j++){
            let grantKey = grantKeys[j];
            if(!!grantKey){
              //grant = grant - grantKey;
              if((grant - grantKey) >= 0){
                grant = grant - grantKey;
                if(j === 0){
                  grantObj[''+menuId]?.push('D');
                }
                else if(j === 1){
                  grantObj[''+menuId]?.push('X');
                }
                else if(j === 2){
                  grantObj[''+menuId]?.push('W');
                }
                else if(j === 3){
                  grantObj[''+menuId]?.push('R');
                }
              }
              else{
                continue;
              }
            }
          }
        }
      }
    }
    useStore.getState().UserStore.setMenuGrantsByKey(grantObj);
  };

  const onSetCommonCodes = ({
    data,
    codeCl,
    code1Filter
  }: OnSetCommonCodesProps) => {
    if(codeCl === '0001'){
      useStore.getState().CommonStore.setBankList(data);
    }
    else if(codeCl === '0002'){
      useStore.getState().CommonStore.setCreditCardList(data);
    }
    else if(codeCl === '0022'){
      let options = [];
      options = data.map((value, index) => {
        return {
          name: value.desc1,
          value: value.code1
        }
      });
      if(!!code1Filter){
        options = options.filter((value, index) => {
          return code1Filter.includes(value.value);
        });
      }
      options = options.sort((a, b) => {
        if(a > b) return 1;
        else if(a < b) return -1;
        else return 0;
      });
      options.unshift({
        name: '전체', value: ''
      });
      useStore.getState().CommonStore.setServiceCodes(options);
    }
    else if(codeCl === '0325'){
      useStore.getState().CommonStore.setAppNotificationCategories(data);
    }
    else if(codeCl === '0074'){
      useStore.getState().CommonStore.setVirtualBankList(data);
    } 
  };

  const saveToken = (token: LoginResponse) => {
    updateUserData(token);
  };
  const alarmLink = (options: AlarmLinkOptions) => {
    if(options?.linkUrl){
      setAlarmRoutesOn(true);
      setAlarmOptions(options);
    }
  };

  const onPressBackKey = () => {
    let pathname = location.pathname;
    console.log('pathname = [' + pathname + ']');
    if(menuOn){
      setMenuOn(false);
      setFavoriteEditOn(false);
    }
    else if(detailOn){
      setDetailOn(false);
    }
    else{
      navigateBack();
    }
  };

  window.saveToken = saveToken;
  window.alarmLink = alarmLink;
  window.onPressBackKey = onPressBackKey;
  
  useEffect(() => {
    handleLogin();
  }, []);
  useEffect(() => {
    if(!!mid){
      callBusinessProperty();
      callFindAuthMethod();
    }
  }, [mid]);

  return (
    <PullToRefresh onRefresh={reload} isPullable={isPullToRefreshEnabled}>
      <div className={ wrapperClassName }>
        <div 
          className="header-empty-block" 
          style={{ width: '100%', height: '50px' }}
        ></div>
        <Fragment>
          <HeaderNavigation
            onBack={ onBack }
            onRightClick={ onRightClick }
            headerTitle={ headerTitle }
            headerType={ headerType }
            key={ headerNavigationKey }
            loginSuccess={ loginSuccess }
            mid={ mid }
            setMid={ setMid }
          />
          { loginSuccess && 
            <Outlet
              context={{
                setOnBack,
                setOnRightClick,
                setHeaderTitle,
                setHeaderType,
                setFooterMode,
                setFooterCurrentPage,
                setIsPullToRefreshEnabled,
              }}
            />
          }
          {
            footerMode && 
            <FooterNavigation
              footerCurrentPage={ footerCurrentPage }
            ></FooterNavigation>
          }
          { alarmRoutesOn &&
            <AlarmRoutes
              options={ alarmOptions }
            ></AlarmRoutes>
          }
          
        </Fragment>
      </div>
    </PullToRefresh>
  );
};