"use client"
import React from 'react'
import { motion } from "framer-motion";

interface ICarDirection {
     lights: {
        parking_lights_status: { value: boolean};
        front_fog_status: { value: boolean};
        rear_fog_lights_status: { value: boolean};
        hazard_lights_status: { value: boolean};
      };
    position: {
        latitude: { value: number };
        longitude: { value: number };
        altitude: { value: number };
        direction: { value: number };
        speed: { value: number };
        validity: { value: boolean | null | null };
      };
       pedals: {
          throttle_pedal_level: { value: boolean};
          brake_pedal_status: { value: boolean};
          pedal_clutch_status: { value: boolean};
        };
}
const CarDirection = ({position,lights,pedals}:ICarDirection) => {

    const car = position
    const currentSpeed = position?.speed?.value

    return (
        <div >
           <svg width="279" height="290" className='max-lg:!w-[200px]' viewBox="0 0 279 290" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M143.307 3.81818V14H142.114L136.565 6.00568H136.466V14H135.233V3.81818H136.426L141.994 11.8324H142.094V3.81818H143.307Z" fill="#A0A0A9" />
                        <path d="M3.08239 150.5L0.298295 140.318H1.55114L3.67898 148.611H3.77841L5.94602 140.318H7.33807L9.50568 148.611H9.60511L11.733 140.318H12.9858L10.2017 150.5H8.92898L6.68182 142.386H6.60227L4.35511 150.5H3.08239Z" fill="#A0A0A9" />
                        <g style={{
                            transform: `rotate(${(car?.direction?.value || 0)  - 130.5 }deg)`,
                            transformOrigin: '142px 145px',
                            transition: 'transform 0.5s ease-out'
                        }}>
                                                       <g clipPath="url(#clip0_8916_50772)" >
                                <rect x="22" y="25" width="240" height="240" rx="120" fill="#D4D4D4" />
                                <mask id="path-4-inside-1_8916_50772" fill="white">
                                    <path d="M108.867 276.152L15.58 193.134L175.131 13.8477L268.418 96.8662L108.867 276.152Z" />
                                </mask>
                                <path d="M108.867 276.152L15.58 193.134L175.131 13.8477L268.418 96.8662L108.867 276.152Z" fill="#686868" />
                                <path d="M17.0376 194.431L176.588 15.1449L173.673 12.5506L14.1223 191.837L17.0376 194.431ZM266.96 95.5691L107.41 274.855L110.325 277.45L269.876 98.1634L266.96 95.5691Z" fill="#929292" mask="url(#path-4-inside-1_8916_50772)" />
                                <mask id="path-6-inside-2_8916_50772" fill="white">
                                    <path d="M108.867 276.152L62.2235 234.643L221.774 55.3569L268.418 96.8662L108.867 276.152Z" />
                                </mask>

                                <path
                                    d="M-13 36.8 H250"
                                    stroke="white"
                                    strokeWidth="2"
                                    transform='rotate(132 100 100)'
                                    fill="none"
                                    strokeDasharray="10,10"
                                >
                                    {currentSpeed  &&
                                    <animate
                                    attributeName="stroke-dashoffset"
                                    from="0"
                                    to="20"
                                    dur={currentSpeed > 120 ? "0.07" : currentSpeed > 80 ? "0.12" : currentSpeed > 50 ? "0.2"  : currentSpeed > 30 ? "0.5" : "0.7"}
                                    repeatCount="indefinite"
                                    />
                                }
                                </path>

                                <rect x="82.9766" y="211.322" width="0.000195122" height="177.561" transform="rotate(-138.333 82.9766 211.322)" fill="#D9D9D9" />
                                {/* car body */}
                                <motion.g
                                      animate={currentSpeed === 0 ? {
                                        rotate: 0,
                                        x: 0,
                                        y: 0,
                                        scale: 1
                                    } : {
                                        rotate: [0, -0.3, 0.4, -0.2, 0],
                                        x: [0, -1.5, 2, -0.5, -1, 0, 1, 0],
                                        y: [0, -2, 1, -1.5, -3, 1, 0, 3, 0],
                                        scale: [1, 1.002, 0.999, 1.001, 1],
                                    }}
                                    transition={currentSpeed === 0 ? {} : {
                                        duration: 8,
                                        ease: [
                                            [0.17, 0.67, 0.83, 0.67],
                                            [0.83, 0.67, 0.17, 0.67],
                                            [0.67, 0.17, 0.67, 0.83],
                                            [0.17, 0.83, 0.67, 0.17]
                                        ],
                                        repeat: Infinity,
                                    }}
                                >
                                    <motion.g initial={{ opacity: 0 }} animate={{ opacity: lights?.front_fog_status?.value ? 1 : 0 }} transition={{ duration: 0.3, ease: "easeInOut" }} >
                                        <g filter="url(#filter1_f_8916_50772)" >
                                            <path d="M93.5117 273.195L117.461 218.205L112.231 213.552L62.1367 245.274L93.5117 273.195Z" fill="white" />
                                        </g>
                                        <g filter="url(#filter2_f_8916_50772)">
                                            <path d="M55.418 239.295L79.3668 184.305L74.1377 179.651L24.0429 211.374L55.418 239.295Z" fill="white" />
                                        </g>
                                        <g filter="url(#filter1_f_8916_50772)">
                                            <path d="M93.5117 273.195L117.461 218.205L112.231 213.552L62.1367 245.274L93.5117 273.195Z" fill="white" />
                                        </g>
                                        <g filter="url(#filter2_f_8916_50772)">
                                            <path d="M55.418 239.295L79.3668 184.305L74.1377 179.651L24.0429 211.374L55.418 239.295Z" fill="white" />
                                        </g>
                                    </motion.g>
                                    <path d="M74.2003 175.113C73.6789 181.573 87.4343 195.819 92.9905 200.763C98.5468 205.708 114.293 217.717 120.649 216.449C133.025 213.98 208.505 124.6 211.822 116.88C214.289 111.139 198.313 93.9082 192.604 88.8279C186.895 83.7471 167.927 69.8797 162.511 72.9968C155.228 77.1878 75.2158 162.534 74.2003 175.113Z" fill="#0F82EA" />
                                    <path d="M80.1546 189.247C84.0622 194.058 88.9592 199.013 92.0803 201.791C95.2015 204.568 100.692 208.858 105.923 212.18C106.518 212.558 107.336 212.358 107.749 211.735C108.162 211.111 108.015 210.3 107.418 209.92C103.461 207.407 99.3597 204.334 96.2914 201.814L91.5688 197.611C88.7095 194.856 85.181 191.139 82.2255 187.5C82.1834 187.449 82.1384 187.403 82.0898 187.359C81.6274 186.948 80.9018 186.946 80.3841 187.383C79.8135 187.865 79.7101 188.701 80.1546 189.247Z" fill="#282F3A" />
                                    <path d="M80.3768 174.501C80.5365 180.383 91.3696 192.375 96.4482 196.895C101.527 201.415 114.695 210.782 120.557 210.258C126.419 209.733 136.761 198.791 139.891 193.544C141.668 188.313 146.4 181.257 151.249 174.599C152.823 174.212 154.98 172.602 156.834 170.518C160.275 168.479 164.951 161.861 168.024 157.944C168.192 157.729 168.792 157.107 168.96 156.892C168.96 156.892 180.91 144.556 185.403 138.416C186.49 136.93 187.876 134.767 188.025 134.138C189.383 132.232 198.099 126.99 199.052 125.445C200.965 122.345 202.24 120.971 202.069 119.7C200.852 110.623 190.811 101.368 185.593 96.724C180.374 92.0801 170.015 83.1809 160.859 83.0259C159.577 83.0041 158.36 84.43 155.503 86.6896C154.079 87.8154 149.885 97.0809 148.149 98.6513C146.901 99.3403 145.554 100.5 144.205 101.753C138.627 106.928 127.762 120.229 127.762 120.229C127.569 120.421 127.02 121.089 126.826 121.281C123.292 124.788 117.262 130.2 115.636 133.855C113.781 135.939 112.432 138.268 112.231 139.876C106.182 145.465 99.7232 150.985 94.7325 153.357C89.8851 157.074 80.2171 168.618 80.3768 174.501Z" fill="#4AA3FF" />
                                    <path d="M134.344 153.588L150.785 148.14L137.846 136.625L134.344 153.588ZM158.732 128.439C159.283 127.82 159.228 126.872 158.609 126.321C157.99 125.771 157.042 125.826 156.491 126.445L158.732 128.439ZM144.439 144.5L158.732 128.439L156.491 126.445L142.198 142.506L144.439 144.5Z" fill="white" />
                                    <path d="M109.9 196.522L131.788 178.74C131.969 178.594 132.22 178.593 132.384 178.738L136.813 182.68C137.042 182.884 136.992 183.267 136.714 183.433L112.826 197.788C112.722 197.85 112.6 197.871 112.487 197.848L110.056 197.334C109.683 197.255 109.591 196.773 109.9 196.522Z" fill="#0F82EA" />
                                    <path d="M95.2662 183.496L110.386 159.691C110.51 159.495 110.482 159.245 110.319 159.1L105.89 155.158C105.661 154.955 105.286 155.049 105.154 155.345L93.6696 180.737C93.6199 180.847 93.6126 180.971 93.6493 181.081L94.4419 183.435C94.5626 183.797 95.0523 183.832 95.2662 183.496Z" fill="#0F82EA" />
                                    <path d="M168.021 157.928L156.275 171.128L142.516 193.554C149.384 187.227 161.426 173.799 172.09 161.549L168.021 157.928Z" fill="#282F3A" />
                                    <path d="M173.02 160.5C184.161 147.677 193.561 136.427 193.561 136.427L185.406 138.413L168.963 156.89L173.02 160.5Z" fill="#282F3A" />
                                    <path d="M110.409 181.208C110.409 181.208 123.63 193.295 140.299 194.471L152.167 174.767C152.167 174.767 142.389 174.8 127.725 161.751C113.062 148.702 111.96 138.985 111.96 138.985L93.7659 153.06C96.869 169.479 110.409 181.208 110.409 181.208Z" fill="#0F82EA" />
                                    <path d="M110.941 180.605C110.941 180.605 123.773 192.334 139.878 193.554L151.236 174.609C151.236 174.609 141.792 174.591 127.562 161.928C113.333 149.264 112.218 139.886 112.218 139.886L94.7197 153.367C97.8026 169.222 110.941 180.605 110.941 180.605Z" fill="#282F3A" />
                                    <path d="M126.836 121.261L115.089 134.46L94.412 150.73C99.8988 143.174 111.838 129.654 122.767 117.641L126.836 121.261Z" fill="#3A454F" />
                                    <path d="M123.709 116.601C135.152 104.047 145.234 93.4034 145.234 93.4034L144.208 101.734L127.766 120.211L123.709 116.601Z" fill="#3A454F" />
                                    <path d="M148.132 98.6476C154.196 101.577 184.395 128.452 188.009 134.135C188.009 134.135 195.849 129.914 199.036 125.442C197.604 120.455 193.009 111.648 181.447 101.359C169.886 91.0701 160.605 87.529 155.485 86.6853C151.414 90.3695 148.132 98.6476 148.132 98.6476Z" fill="#282F3A" />
                                    <path d="M97.8032 143.073L94.0658 137.525C93.6867 136.962 92.8305 137.004 92.4418 137.608C91.695 138.769 91.544 140.163 93.0587 142.35C94.7076 144.731 96.469 144.527 97.4511 144.134C97.8771 143.963 98.0484 143.438 97.8032 143.073Z" fill="#4AA3FF" />
                                    <path d="M149.74 189.284L155.685 192.352C156.288 192.664 156.346 193.519 155.791 193.976C154.725 194.852 153.359 195.165 151.01 193.913C148.454 192.552 148.452 190.779 148.729 189.758C148.848 189.314 149.349 189.083 149.74 189.284Z" fill="#4AA3FF" />
                                    <path d="M112.223 139.88L94.7246 153.361C97.8068 169.215 110.946 180.599 110.946 180.599L127.568 161.921C113.337 149.258 112.223 139.88 112.223 139.88Z" fill="#3A454F" />
                                    <path d="M148.148 98.6431C148.352 98.7416 148.565 98.8585 148.785 98.9858C148.843 99.0196 148.915 99.0672 148.976 99.104C149.103 99.1811 149.229 99.2545 149.36 99.3403C153.167 101.749 161.202 108.409 169.005 115.353L181.464 101.354C169.903 91.0655 160.622 87.5238 155.502 86.6802C151.43 90.365 148.148 98.6431 148.148 98.6431Z" fill="#3A454F" />
                                    <path d="M192.592 88.8313C190.723 87.1681 187.43 84.5633 183.66 81.9213C183.656 81.9304 183.65 81.9401 183.646 81.9492C183.335 82.5559 183.642 83.4894 184.322 84.0504C189.135 88.0182 193.801 92.1706 198.301 96.4911C198.938 97.1019 199.9 97.2976 200.466 96.9182C200.475 96.9127 200.484 96.9065 200.493 96.9009C197.431 93.4619 194.461 90.4945 192.592 88.8313Z" fill="#4AA3FF" />
                                    <path d="M205.216 102.993C204.588 103.448 204.452 104.317 204.899 104.955C206.231 106.852 207.489 108.807 208.67 110.816C209.065 111.487 209.915 111.727 210.591 111.348C210.599 111.343 210.608 111.338 210.616 111.334C210.699 111.288 210.766 111.226 210.829 111.162C209.638 108.646 207.695 105.753 205.468 102.864C205.39 102.898 205.311 102.925 205.239 102.976C205.231 102.982 205.223 102.988 205.216 102.993Z" fill="#A91F3E" />
                                    <path d="M168.154 73.5682C167.855 74.2834 168.192 75.1002 168.905 75.4145C171.037 76.3546 173.125 77.3773 175.164 78.4799C175.849 78.8501 176.697 78.614 177.076 77.9371C177.08 77.9293 177.085 77.9202 177.089 77.9123C177.133 77.8354 177.15 77.753 177.174 77.6715C174.047 75.7938 170.947 74.2011 168.31 73.31C168.254 73.3807 168.201 73.4538 168.163 73.5412C168.161 73.5508 168.157 73.5592 168.154 73.5682Z" fill="#A91F3E" />
                                    <path d="M78.0961 179.597C78.5038 179.459 79.0155 180.001 79.2378 180.807C79.4613 181.613 79.3116 182.377 78.9032 182.515C78.4961 182.652 77.9838 182.11 77.7615 181.304C77.5392 180.498 77.6883 179.733 78.0961 179.597Z" fill="white" />
                                    <path d="M76.589 174.109C77.2684 173.88 78.1209 174.783 78.4925 176.126C78.864 177.469 78.6146 178.743 77.9353 178.972C77.2559 179.201 76.404 178.297 76.0319 176.955C75.6597 175.613 75.9097 174.338 76.589 174.109Z" fill="white" />
                                    <path d="M115.75 213.113C115.84 212.693 115.241 212.247 114.415 212.12C113.589 211.992 112.847 212.229 112.758 212.651C112.669 213.071 113.266 213.517 114.093 213.644C114.919 213.771 115.661 213.534 115.75 213.113Z" fill="white" />
                                    <path d="M121.365 213.976C121.513 213.274 120.517 212.532 119.14 212.319C117.763 212.106 116.527 212.502 116.378 213.203C116.23 213.904 117.226 214.646 118.603 214.859C119.979 215.073 121.216 214.677 121.365 213.976Z" fill="white" />
                                    
                                    <motion.g initial={{ opacity: 0 }} animate={{ opacity: pedals?.brake_pedal_status?.value ? 1 : 0 }} transition={{ duration: 0.3, ease: "easeInOut" }} >
                                        <g filter="url(#filter3_f_8916_50772)">
                                            <path d="M218.992 111.121L211.518 110.494L206.083 102.311L210.363 96.749L218.992 111.121Z" fill="#FF1010" />
                                        </g>
                                        <g filter="url(#filter4_f_8916_50772)">
                                            <path d="M168.203 65.9255L169.693 73.2759L178.452 77.7239L183.479 72.8271L168.203 65.9255Z" fill="#FF1010" />
                                        </g>
                                    </motion.g>
                                </motion.g>

                            </g>
                        </g>
                        <>
                        <path d="M271.233 150.5V140.318H277.378V141.412H272.466V144.852H277.06V145.946H272.466V149.406H277.457V150.5H271.233Z" fill="#A0A0A9" />
                        <path d="M141.801 279.364C141.741 278.86 141.5 278.469 141.075 278.19C140.651 277.912 140.131 277.773 139.514 277.773C139.063 277.773 138.669 277.846 138.331 277.991C137.996 278.137 137.734 278.338 137.545 278.593C137.36 278.848 137.267 279.138 137.267 279.463C137.267 279.735 137.332 279.969 137.461 280.164C137.594 280.356 137.763 280.517 137.968 280.646C138.174 280.772 138.389 280.877 138.614 280.96C138.84 281.039 139.047 281.104 139.236 281.153L140.27 281.432C140.535 281.501 140.83 281.598 141.155 281.72C141.483 281.843 141.796 282.01 142.094 282.222C142.396 282.431 142.645 282.7 142.84 283.028C143.036 283.356 143.134 283.759 143.134 284.236C143.134 284.786 142.989 285.283 142.701 285.727C142.416 286.171 141.998 286.524 141.448 286.786C140.901 287.048 140.237 287.179 139.455 287.179C138.725 287.179 138.094 287.061 137.56 286.826C137.03 286.591 136.612 286.263 136.308 285.842C136.006 285.421 135.835 284.932 135.795 284.375H137.068C137.101 284.759 137.231 285.078 137.456 285.33C137.685 285.578 137.973 285.764 138.321 285.886C138.672 286.006 139.05 286.065 139.455 286.065C139.925 286.065 140.348 285.989 140.722 285.837C141.097 285.681 141.393 285.465 141.612 285.19C141.831 284.912 141.94 284.587 141.94 284.216C141.94 283.878 141.846 283.603 141.657 283.391C141.468 283.179 141.219 283.006 140.911 282.874C140.603 282.741 140.27 282.625 139.912 282.526L138.659 282.168C137.864 281.939 137.234 281.612 136.77 281.188C136.306 280.764 136.074 280.209 136.074 279.523C136.074 278.953 136.228 278.455 136.536 278.031C136.848 277.604 137.265 277.272 137.789 277.037C138.316 276.798 138.904 276.679 139.554 276.679C140.21 276.679 140.794 276.797 141.304 277.032C141.814 277.264 142.219 277.582 142.517 277.987C142.819 278.391 142.978 278.85 142.994 279.364H141.801Z" fill="#A0A0A9" />
                        </>
                        <defs>
                            <filter id="filter0_i_8916_50772" x="22" y="25" width="240" height="243.902" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
                                <feFlood floodOpacity="0" result="BackgroundImageFix" />
                                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                                <feOffset dy="3.90244" />
                                <feGaussianBlur stdDeviation="3.90244" />
                                <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
                                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0" />
                                <feBlend mode="normal" in2="shape" result="effect1_innerShadow_8916_50772" />
                            </filter>
                            <filter id="filter1_f_8916_50772" x="47.1367" y="198.553" width="85.3242" height="89.6426" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
                                <feFlood floodOpacity="0" result="BackgroundImageFix" />
                                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                                <feGaussianBlur stdDeviation="7.5" result="effect1_foregroundBlur_8916_50772" />
                            </filter>
                            <filter id="filter2_f_8916_50772" x="9.04297" y="164.652" width="85.3242" height="89.6426" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
                                <feFlood floodOpacity="0" result="BackgroundImageFix" />
                                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                                <feGaussianBlur stdDeviation="7.5" result="effect1_foregroundBlur_8916_50772" />
                            </filter>
                            <filter id="filter3_f_8916_50772" x="197.082" y="87.748" width="30.9102" height="32.373" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
                                <feFlood floodOpacity="0" result="BackgroundImageFix" />
                                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                                <feGaussianBlur stdDeviation="4.5" result="effect1_foregroundBlur_8916_50772" />
                            </filter>
                            <filter id="filter4_f_8916_50772" x="159.203" y="56.9258" width="33.2773" height="29.7988" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
                                <feFlood floodOpacity="0" result="BackgroundImageFix" />
                                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                                <feGaussianBlur stdDeviation="4.5" result="effect1_foregroundBlur_8916_50772" />
                            </filter>
                            <clipPath id="clip0_8916_50772">
                                <rect x="22" y="25" width="240" height="240" rx="120" fill="white" />
                            </clipPath>
                        </defs>
                    </svg>
        </div>
    )
}

export default CarDirection