/* -------------------------------------------------------------------------- */
/*                                  Libraries                                 */
/* -------------------------------------------------------------------------- */
import React from "react";
import { useTranslation } from "react-i18next";
/* -------------------------------------------------------------------------- */
/*                                    Hooks                                   */
/* -------------------------------------------------------------------------- */
import { useUserStore } from "user/data/userSlice";
import { useUserViewModel } from "user/controller/userViewModel";
/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import Area from "components/containers/area/Area";
import IconedAreaCaption from "components/containers/area/IconedAreaCaption";
import ThinSingleColumn from "components/layouts/ThinSingleColumn";
import AreaDescription from "components/containers/area/AreaDescription";
import ControlLabel from "components/controls/ControlLabel";
import Switch from "components/controls/Switch";
import TextAction from 'components/controls/TextAction'
/* -------------------------------------------------------------------------- */
/*                                    Icons                                   */
/* -------------------------------------------------------------------------- */
import { ReactComponent as SVGLockIcon } from "assets/svg/lock.svg";
import { ReactComponent as SVGFingerprintIcon } from "assets/svg/fingerprint.svg";

const Security = () => {
  const store = useUserStore();

  const {t} = useTranslation();

  const {
    getUser,
    twoFactorEnabled,
    toggleTwoFactorAuthenitcation,
  } = useUserViewModel(store);

  React.useEffect(() => {
    getUser();
  }, [getUser]);

  return (
    <ThinSingleColumn>
      <Area>
        <IconedAreaCaption
          caption={t('security.password.caption')}
          icon={<SVGLockIcon className="w-full h-full stroke-current" />}
        />
        <AreaDescription>
          <TextAction variant="blue">{t('edit')}</TextAction>
        </AreaDescription>
        <AreaDescription>
          Last edit month ago
        </AreaDescription>
      </Area>

      <Area>
        <IconedAreaCaption
          caption={t('security.password.twoFactor')}
          icon={<SVGFingerprintIcon className="w-full h-full fill-current" />}
        />
        <ControlLabel label={twoFactorEnabled ? "on" : "off"}>
          <Switch
            enabled={!!twoFactorEnabled}
            onChange={() => toggleTwoFactorAuthenitcation()}
            alterText="two factor authentication changing"
          />
        </ControlLabel>
        <AreaDescription>
          {t('security.password.description')}
        </AreaDescription>
      </Area>
      <Area>
        <IconedAreaCaption
          caption={t('security.activity.caption')}
          icon={<SVGLockIcon className="w-full h-full stroke-current" />}
        />
        <ControlLabel label="last visit, today 08:16 am" />
        <AreaDescription>
          <TextAction variant="blue">{t('viewHistory')}</TextAction>
        </AreaDescription>
        <AreaDescription>
          <TextAction variant="blue">{t('logOutEverywhere')}</TextAction>
        </AreaDescription>
      </Area>
    </ThinSingleColumn>
  );
}

export default Security;