From 56fc9a2e725ba7aceeb36d06e98b96d0bd6609ef Mon Sep 17 00:00:00 2001
From: andreidekterev <andrey.dekterev@insports.tv>
Date: Mon, 19 Jun 2023 21:30:36 +0700
Subject: [PATCH] feat(#680): add embed component

---
 .../components/EmbeddedComponent.tsx          | 39 +++++++++++++++++++
 src/pages/StatsView/hooks.tsx                 |  4 +-
 src/pages/StatsView/index.tsx                 |  5 ++-
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/StatsView/components/EmbeddedComponent.tsx

diff --git a/src/pages/StatsView/components/EmbeddedComponent.tsx b/src/pages/StatsView/components/EmbeddedComponent.tsx
new file mode 100644
index 00000000..27a4798e
--- /dev/null
+++ b/src/pages/StatsView/components/EmbeddedComponent.tsx
@@ -0,0 +1,39 @@
+import styled from 'styled-components/macro'
+
+import { ButtonSolid, Input } from 'features/Common'
+
+const EmbedContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100%;
+`
+
+const EmbedInput = styled(Input)`
+  margin: 0;
+  max-width: 400px;
+  wrapperHeight: none;
+`
+
+type EmbedProps = {
+  url: string,
+}
+
+export const EmbeddedComponent = ({ url }:EmbedProps) => {
+  const iframeString = `<iframe src=${url}" width="300px" border="0" class="insports-embed" allowFullScreen srcdoc=${document.querySelector('#statsview')} />`
+
+  const handleCopy = async (src: string) => {
+    await navigator.clipboard.writeText(src)
+  }
+
+  return (
+    <EmbedContainer>
+      <EmbedInput
+        disabled={!!true}
+        label='Embed Code'
+        defaultValue={iframeString}
+      />
+      <ButtonSolid onClick={() => handleCopy(iframeString)}>Copy code</ButtonSolid>
+    </EmbedContainer>
+  )
+}
diff --git a/src/pages/StatsView/hooks.tsx b/src/pages/StatsView/hooks.tsx
index 75b387d3..4955d226 100644
--- a/src/pages/StatsView/hooks.tsx
+++ b/src/pages/StatsView/hooks.tsx
@@ -22,6 +22,7 @@ const INTERVAL_FETCH_STATS = 30 * 1000
 export const useStatsView = () => {
   const [matchProfile, setMatchProfile] = useState<MatchInfo>(null)
   const [stats, setStats] = useState<TeamsStats>({})
+
   const {
     profileId,
     sportName,
@@ -55,13 +56,14 @@ export const useStatsView = () => {
   const { start, stop } = useInterval({
     callback: fetchStats,
     intervalDuration: INTERVAL_FETCH_STATS,
-    startImmediate: true,
+    startImmediate: false,
   })
 
   useEffect(() => {
     if (!sportName || !profileId) return undefined
 
     start()
+    fetchStats()
     fetchMatchInfo()
 
     return () => stop()
diff --git a/src/pages/StatsView/index.tsx b/src/pages/StatsView/index.tsx
index e9a6c8dc..44830aa2 100644
--- a/src/pages/StatsView/index.tsx
+++ b/src/pages/StatsView/index.tsx
@@ -9,7 +9,7 @@ const StatsView = () => {
   const { matchProfile, teamsStats } = useStatsView()
 
   return (
-    <Container>
+    <Container id='statsview'>
       <header className='header__logo'>
         <Logo />
       </header>
@@ -28,6 +28,9 @@ const StatsView = () => {
           </Powered>
         </a>
       </footer>
+      {/* пока закомментил, потому что он будет вставляться вместе со страницей
+      <EmbeddedComponent url={window.location.href} /> */}
+
     </Container>
   )
 }