'use client';
import { WidgetPosition } from '@/config/enums/tip-tap';
import { Article } from '@/features/posts/_lib/transformers';
import Link from 'next/link';
import { SuggestionProps } from '../../types/types';
import { api } from '@/lib/trpc/client';

export default function SuggestionWidget({
  props,
  post
}: {
  props: SuggestionProps;
  post?: Article;
}) {
  if (!props || !post) {
    return null;
  }

  if (!!props.id) {
    return renderWidgetById(props);
  } else {
    return renderWidgetByLocation(props);
  }
}

const renderWidgetById = (props: SuggestionProps) => {
  const { variant, id } = props;

  const { data: suggestion } = api.citychange.get.useQuery({
    id
  });

  if (!suggestion) {
    return null;
  }

  if (variant === WidgetPosition.LEFT_COL) {
    return (
      <div className='widget-left-col'>
        <div className='suggestion border-t border-t-[#1C3A4F]'>
          <div className='bg-client-yellow flex flex-col px-4 py-4'>
            <svg
              xmlns='http://www.w3.org/2000/svg'
              width='19.944'
              height='23.904'
              viewBox='0 0 19.944 23.904'
            >
              <g
                id='Group_65'
                data-name='Group 65'
                transform='translate(-773.018 -650)'
              >
                <g id='cc-logo-no_text' transform='translate(773.018 650)'>
                  <g
                    id='Group_66'
                    data-name='Group 66'
                    transform='translate(0 0)'
                  >
                    <path
                      id='Path_7'
                      data-name='Path 7'
                      d='M135.7,117.692a3.256,3.256,0,1,1,3.256-3.256A3.257,3.257,0,0,1,135.7,117.692Z'
                      transform='translate(-125.592 -104.299)'
                      fill='#223840'
                    />
                    <g id='Group_191' data-name='Group 191'>
                      <path
                        id='Path_6'
                        data-name='Path 6'
                        d='M64.064,42.492a9.986,9.986,0,0,1,17.05,7.078,9.615,9.615,0,0,1-2.576,6.7.475.475,0,0,1-.775.029l-3.275-3.353a.333.333,0,0,1,0-.523,4.168,4.168,0,0,0,1.069-2.834,3.836,3.836,0,0,0-1.269-2.938,4.331,4.331,0,0,0-3.053-1.174,4.189,4.189,0,0,0-3.011,1.187,3.9,3.9,0,0,0-1.248,2.947,4.186,4.186,0,0,0,1.008,2.813.347.347,0,0,1-.02.543l-3.358,3.362a.47.47,0,0,1-.748-.029,9.31,9.31,0,0,1-2.688-6.732,9.9,9.9,0,0,1,2.9-7.078Z'
                        transform='translate(-61.17 -39.57)'
                        fill='#223840'
                      />
                      <path
                        id='Path_8'
                        data-name='Path 8'
                        d='M109.131,195.043a.4.4,0,0,1-.563,0l-5.66-5.66a.4.4,0,0,1,0-.563l3.427-3.428a.4.4,0,0,1,.563,0l1.669,1.669a.4.4,0,0,0,.563,0l1.692-1.692a.4.4,0,0,1,.563,0l3.428,3.427a.4.4,0,0,1,0,.563l-5.684,5.685Z'
                        transform='translate(-98.793 -171.254)'
                        fill='#223840'
                      />
                    </g>
                  </g>
                </g>
              </g>
            </svg>
            <span className='text-sm font-bold text-cyan-950'>
              {suggestion.address.street}
            </span>
          </div>
          <div className='relative flex grow flex-col gap-2 border-b bg-neutral-100 px-4 py-6'>
            <span className='text-[#1C3A4F]'>{suggestion.slug}</span>
            <h5 className='text-xl font-bold text-[#1C3A4F]'>
              <Link
                href={suggestion.url}
                target='_blank'
                className='bg-[linear-gradient(transparent_calc(100%_-_0.07em),#1C3A4F_0.07em)] bg-size-[0_100%] bg-no-repeat no-underline transition-all duration-300 ease-[ease-in-out] before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full before:transition-all hover:bg-size-[100%_100%]'
              >
                {suggestion.title}
              </Link>
            </h5>

            <span className='text-client-sky text-[60px] leading-none font-bold'>
              {`${suggestion.rate ? suggestion.rate : 0}%`}
            </span>
            <span className='uppercase'>{suggestion.votes} STEMMER</span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className='my-6'>
      <div className='suggestion border-t border-t-[#1C3A4F] sm:flex'>
        <div className='bg-client-yellow flex flex-col px-4 py-4 sm:w-40'>
          <svg
            xmlns='http://www.w3.org/2000/svg'
            width='19.944'
            height='23.904'
            viewBox='0 0 19.944 23.904'
          >
            <g
              id='Group_65'
              data-name='Group 65'
              transform='translate(-773.018 -650)'
            >
              <g id='cc-logo-no_text' transform='translate(773.018 650)'>
                <g
                  id='Group_66'
                  data-name='Group 66'
                  transform='translate(0 0)'
                >
                  <path
                    id='Path_7'
                    data-name='Path 7'
                    d='M135.7,117.692a3.256,3.256,0,1,1,3.256-3.256A3.257,3.257,0,0,1,135.7,117.692Z'
                    transform='translate(-125.592 -104.299)'
                    fill='#223840'
                  />
                  <g id='Group_191' data-name='Group 191'>
                    <path
                      id='Path_6'
                      data-name='Path 6'
                      d='M64.064,42.492a9.986,9.986,0,0,1,17.05,7.078,9.615,9.615,0,0,1-2.576,6.7.475.475,0,0,1-.775.029l-3.275-3.353a.333.333,0,0,1,0-.523,4.168,4.168,0,0,0,1.069-2.834,3.836,3.836,0,0,0-1.269-2.938,4.331,4.331,0,0,0-3.053-1.174,4.189,4.189,0,0,0-3.011,1.187,3.9,3.9,0,0,0-1.248,2.947,4.186,4.186,0,0,0,1.008,2.813.347.347,0,0,1-.02.543l-3.358,3.362a.47.47,0,0,1-.748-.029,9.31,9.31,0,0,1-2.688-6.732,9.9,9.9,0,0,1,2.9-7.078Z'
                      transform='translate(-61.17 -39.57)'
                      fill='#223840'
                    />
                    <path
                      id='Path_8'
                      data-name='Path 8'
                      d='M109.131,195.043a.4.4,0,0,1-.563,0l-5.66-5.66a.4.4,0,0,1,0-.563l3.427-3.428a.4.4,0,0,1,.563,0l1.669,1.669a.4.4,0,0,0,.563,0l1.692-1.692a.4.4,0,0,1,.563,0l3.428,3.427a.4.4,0,0,1,0,.563l-5.684,5.685Z'
                      transform='translate(-98.793 -171.254)'
                      fill='#223840'
                    />
                  </g>
                </g>
              </g>
            </g>
          </svg>
          <span className='text-sm font-bold text-cyan-950'>
            {suggestion.address.street}
          </span>
        </div>

        <div className='relative flex grow flex-col gap-2 border-b bg-neutral-100 px-4 py-6'>
          <span className='text-[#1C3A4F]'>{suggestion.slug}</span>
          <h5 className='text-xl font-bold text-[#1C3A4F]'>
            <Link
              href={suggestion.url}
              target='_blank'
              className='bg-[linear-gradient(transparent_calc(100%_-_0.07em),#1C3A4F_0.07em)] bg-size-[0_100%] bg-no-repeat no-underline transition-all duration-300 ease-[ease-in-out] before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full before:transition-all hover:bg-size-[100%_100%]'
            >
              {suggestion.title}
            </Link>
          </h5>

          <span className='text-[60px] leading-none font-bold text-[#75AFE5]'>
            {`${suggestion.rate ? suggestion.rate : 0}%`}
          </span>
          <span className='uppercase'>{suggestion.votes} STEMMER</span>
        </div>
      </div>
    </div>
  );
};

const renderWidgetByLocation = (props: SuggestionProps) => {
  const { variant } = props;

  const { data } = api.citychange.list.useQuery({
    lat: 55.676,
    lng: 12.568
  });

  const suggestions = data?.suggestions;

  if (!suggestions?.length) {
    return null;
  }

  if (variant === WidgetPosition.LEFT_COL) {
    return (
      <div className='widget-left-col'>
        <div className='suggestion border-y border-y-[#1C3A4F]'>
          <div className='bg-client-yellow flex flex-col px-4 py-4'>
            <h6 className='text-[28px] font-bold text-[#1C3A4F]'>Forslag</h6>
            <p className='text-[#1C3A4F]'>I nærheden</p>
            <Link
              href='https://citychange.app/'
              target='_blank'
              rel='noreferrer'
              className='mt-auto block text-sm text-[#1C3A4F] underline hover:no-underline'
            >
              Hvad er dette?
            </Link>
          </div>

          <ul className='grow'>
            {suggestions.map((item, index) => (
              <li
                key={index}
                className='relative flex flex-col gap-2 border-b bg-neutral-100 px-4 py-6'
              >
                <span className='text-[#1C3A4F]'>{item.slug}</span>
                <h5 className='text-xl font-bold text-[#1C3A4F]'>
                  <Link
                    href={`https://citychange.page.link/?amv=1&apn=com.civitist&ibi=com.civitist.plus&imv=1.0.30&isi=1554881902&link=https%3A%2F%2Fcitychange.app%3Fsuggestion_id%3D${item.id}`}
                    target='_blank'
                    className='bg-[linear-gradient(transparent_calc(100%_-_0.07em),#1C3A4F_0.07em)] bg-size-[0_100%] bg-no-repeat no-underline transition-all duration-300 ease-[ease-in-out] before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full before:transition-all hover:bg-size-[100%_100%]'
                  >
                    {item.title}
                  </Link>
                </h5>

                <span className='text-[60px] leading-none font-bold text-[#75AFE5]'>
                  {item.rating}%
                </span>
                <span className='uppercase'>{item.total} STEMMER</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }

  return (
    <div className='my-6'>
      <div className='suggestion border-y border-y-[#1C3A4F] sm:flex'>
        <div className='bg-client-yellow flex flex-col px-4 py-4 sm:w-40'>
          <h6 className='text-[28px] font-bold text-[#1C3A4F]'>Forslag</h6>
          <p className='text-[#1C3A4F]'>I nærheden</p>
          <Link
            href='https://citychange.app/'
            target='_blank'
            rel='noreferrer'
            className='mt-auto block text-sm text-[#1C3A4F] underline hover:no-underline'
          >
            Hvad er dette?
          </Link>
        </div>

        <ul className='grow'>
          {suggestions.map((item, index) => (
            <li
              key={index}
              className='relative flex flex-col gap-2 border-b bg-neutral-100 px-4 py-6'
            >
              <span className='text-[#1C3A4F]'>{item.slug}</span>
              <h5 className='text-xl font-bold text-[#1C3A4F]'>
                <Link
                  href={`https://citychange.page.link/?amv=1&apn=com.civitist&ibi=com.civitist.plus&imv=1.0.30&isi=1554881902&link=https%3A%2F%2Fcitychange.app%3Fsuggestion_id%3D${item.id}`}
                  target='_blank'
                  className='bg-[linear-gradient(transparent_calc(100%_-_0.07em),#1C3A4F_0.07em)] bg-size-[0_100%] bg-no-repeat no-underline transition-all duration-300 ease-[ease-in-out] before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full before:transition-all hover:bg-size-[100%_100%]'
                >
                  {item.title}
                </Link>
              </h5>

              <span className='text-[60px] leading-none font-bold text-[#75AFE5]'>
                {item.rating}%
              </span>
              <span className='uppercase'>{item.total} STEMMER</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};