import Image from '@/@widgets/image/Image';

import { Background, Button, Flex, Padding, Spacing, Text, TouchableOpacity } from '@/@dble_layout';
import { IconTab } from '@/@widgets/tab/IconTab';
import { useJenga } from '@/libs/provider/JengaProvider';
import { useState } from 'react';
import WidgetContainer from './_WidgetContainer';

export const 장바구니 = () => {
  const { addToast } = useJenga();
  const [isLike, setIsLike] = useState(false);

  return (
    <WidgetContainer
      title='쇼핑 장바구니'
      delay={0.2}
      description='우리는 쇼핑몰 디자인 및 개발에도 많은 경험이 있어요'
    >
      <Padding horizontal={10} vertical={10}>
        <Flex direc='row' align='center' gap={15}>
          <Background w='auto' shadow={{ x: 0, y: 1, blur: 10, color: '#d8dced' }} border={{ radius: 12 }}>
            <Image
              size={{ minWidth: 50, minHeight: 50, maxWidth: 50, maxHeight: 50 }}
              source='/assets/images/sample/shose.png'
              alt='dble 쇼핑몰 디자인'
              borderRadius={12}
            />
          </Background>

          <Flex gap={2}>
            <Text size={13} color='#69696a'>
              나이키 에어 포스 1
            </Text>

            <Text size={15} weight='medium'>
              116,100 원
            </Text>
          </Flex>

          <IconTab
            onClick={() => {
              setIsLike(!isLike);
              if (!isLike) {
                addToast({
                  title: '좋아요를 추가했어요!',
                  description: 'DBLE은 모달 팝업 디자인에도 자신있어요!',
                });
              }
            }}
            iconSize={16}
            icon={
              <svg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
                <path
                  d='M20.255 2.957C19.7021 2.33764 19.024 1.84286 18.2654 1.50547C17.5068 1.16808 16.6852 0.995781 15.855 0.999999C14.5973 0.99628 13.3769 1.42687 12.4 2.219C11.8644 2.64645 11.3929 3.14857 11 3.71C10.6071 3.14854 10.1356 2.64641 9.6 2.219C8.62341 1.42701 7.40336 0.996429 6.146 0.999999C5.3158 0.995781 4.49418 1.16808 3.73561 1.50547C2.97704 1.84286 2.29885 2.33764 1.746 2.957C0.590283 4.28554 -0.0318094 5.9954 2.80782e-06 7.756C0.0477106 9.78411 0.822017 11.7277 2.182 13.233C3.85875 15.1234 5.68535 16.8755 7.644 18.472C8.401 19.131 9.259 19.878 10.149 20.672C10.3824 20.8819 10.6851 20.998 10.999 20.998C11.3129 20.998 11.6156 20.8819 11.849 20.672C12.74 19.872 13.598 19.129 14.355 18.472C16.3137 16.8759 18.1403 15.1242 19.817 13.234C21.1776 11.7286 21.9523 9.78461 22 7.756C22.0324 5.99518 21.4107 4.2849 20.255 2.956V2.957Z'
                  fill={isLike ? '#ef6363' : '#e0e0e0'}
                />
              </svg>
            }
          />
        </Flex>

        <Spacing size={20} />

        <Flex direc='row' gap={8}>
          <TouchableOpacity
            w={48}
            minW={48}
            h={48}
            onClick={() => {
              addToast({
                title: '장바구니에 추가했어요!',
                description: 'DBLE은 모달 팝업 디자인에도 자신있어요!',
              });
            }}
          >
            <Background h='100%' fill='#f6f6fa' border={{ radius: 14, stroke: 1, color: '#eee' }}>
              <Flex h='100%' align='center' justify='center'>
                <svg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
                  <g clip-path='url(#clip0_1473_2)'>
                    <path
                      d='M16.662 16.357C16.1561 16.3566 15.6615 16.5062 15.2406 16.7869C14.8198 17.0676 14.4916 17.4668 14.2976 17.934C14.1036 18.4012 14.0524 18.9155 14.1507 19.4117C14.2489 19.908 14.4921 20.364 14.8495 20.722C15.2068 21.0801 15.6623 21.3241 16.1584 21.4233C16.6545 21.5226 17.1688 21.4724 17.6364 21.2793C18.1039 21.0862 18.5038 20.7588 18.7853 20.3385C19.0668 19.9182 19.2174 19.4239 19.218 18.918C19.218 18.2397 18.9489 17.589 18.4697 17.1089C17.9905 16.6287 17.3403 16.3583 16.662 16.357Z'
                      fill='#8d949b'
                    />
                    <path
                      d='M21.2 4.11101C21.1387 4.09913 21.0764 4.0931 21.014 4.09301H5.437L5.19 2.44301C5.11568 1.91251 4.85205 1.42678 4.44773 1.07539C4.04342 0.723999 3.52568 0.530652 2.99 0.531006H0.987C0.725231 0.531006 0.474184 0.634993 0.289086 0.820092C0.103987 1.00519 0 1.25624 0 1.51801C0 1.77977 0.103987 2.03082 0.289086 2.21592C0.474184 2.40102 0.725231 2.50501 0.987 2.50501H2.995C3.05563 2.50456 3.1143 2.52642 3.15985 2.56644C3.2054 2.60646 3.23464 2.66183 3.242 2.72201L4.762 13.138C4.86368 13.7781 5.18991 14.361 5.68226 14.7825C6.17461 15.2039 6.80091 15.4363 7.449 15.438H17.713C18.3386 15.4388 18.9453 15.2235 19.4304 14.8284C19.9154 14.4333 20.2491 13.8828 20.375 13.27L21.981 5.26501C22.03 5.00846 21.9753 4.74295 21.8289 4.52665C21.6825 4.31034 21.4564 4.16088 21.2 4.11101Z'
                      fill='#8d949b'
                    />
                    <path
                      d='M10.395 18.805C10.3661 18.145 10.0829 17.5217 9.60477 17.0658C9.12665 16.6098 8.49066 16.3565 7.82999 16.359C7.1633 16.3837 6.53264 16.6678 6.07249 17.1509C5.61234 17.6339 5.35911 18.2776 5.36681 18.9447C5.3745 19.6118 5.64251 20.2495 6.11369 20.7218C6.58486 21.1941 7.22191 21.4637 7.88899 21.473H7.95099C8.28667 21.4583 8.61617 21.3777 8.92068 21.2357C9.22519 21.0937 9.49873 20.8931 9.72569 20.6453C9.95265 20.3975 10.1286 20.1075 10.2434 19.7917C10.3583 19.476 10.4098 19.1407 10.395 18.805Z'
                      fill='#8d949b'
                    />
                  </g>
                  <defs>
                    <clipPath id='clip0_1473_2'>
                      <rect width='22' height='22' fill='white' />
                    </clipPath>
                  </defs>
                </svg>
              </Flex>
            </Background>
          </TouchableOpacity>

          <Button w='100%'>구매하기</Button>
        </Flex>
      </Padding>
    </WidgetContainer>
  );
};