"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");

const styleh_components_1 = require("styleh-components");

const Image_1 = tslib_1.__importDefault(require("@skava/ui/dist/components/atoms/Image"));

const Text_1 = require("@skava/ui/dist/components/atoms/Text");

const Button_1 = require("@skava/ui/dist/components/atoms/Button");

const ProductItem_1 = require("../../../abstractions/Order/ProductItem");

const Buttons_1 = require("../../Buttons");

const ProductPrice_1 = require("../../ProductPieces/ProductPrice");

const DetailedList_1 = require("@skava/ui/dist/components/molecules/DetailedList");

const MaterialIcon_1 = require("@skava/ui/dist/components/atoms/MaterialIcon");

const StyledSubscription = styleh_components_1.styled(MaterialIcon_1.MaterialIcon)`fill:#F88F22;`;
exports.StyledSubscription = StyledSubscription;
const ProductImage = styleh_components_1.styled.withComponent(Image_1.default)`background-color:var(--color-white-grey);width:11.25rem;height:8rem;overflow:hidden;padding:5px;@media (max-width:1023px){width:8.5rem;height:6.8125rem;}${props => props.singleProduct && styleh_components_1.styled.css`@media (max-width:1023px){width:100%;}`} ${props => props.isSubscriptionItem && styleh_components_1.styled.css`width:100%;background-color:transparent;@media (max-width:1023px){width:100%;}`}`;
exports.ProductImage = ProductImage;
const ProductItemsWrapper = styleh_components_1.styled.div`flex:0 0 70%;display:flex;@media (max-width:767px){flex:0 0 100%;}`;
const ProductDescription = styleh_components_1.styled.withComponent(Text_1.Paragraph)`font-size:16px;color:var(--color-black);padding:8px 0 0 0;${props => props.isSubscriptionItem && styleh_components_1.styled.css`color:var(--color-dark-grey);margin-top:0;padding:0;`}`;
exports.ProductDescription = ProductDescription; // @note - all fonts are roboto
// font-family: "Roboto";

const ProductTitle = styleh_components_1.styled.withComponent(Text_1.Heading).attrs({
  'data-qa': 'qa-product-name'
})`margin:0 0 8px 0;font-size:18px;color:var(--color-black);font-weight:500;line-height:1.5rem;white-space:normal;word-wrap:break-word;@media (max-width:1023px){font-size:14px;font-weight:700;}`;
exports.ProductTitle = ProductTitle;
const ProductFacetsStyles = styleh_components_1.styled.css`font-size:16px;color:var(--color-dark-grey);font-weight:400;margin-bottom:3px @media (max-width:1023px){font-size:11px;}`; // @note - all fonts are roboto
// font-family: "Roboto";

const ProductFacets = styleh_components_1.styled.withComponent(Text_1.Text).attrs({
  'data-qa': 'qa-product-option'
})`${ProductFacetsStyles} ${props => props.isSubscriptionItem && styleh_components_1.styled.css`margin-bottom:8px;`}`;
exports.ProductFacets = ProductFacets;
/*
const StyledProductItemId = styled.withComponent(Text).attrs({
  'data-qa': 'qa-identifier',
})`
  ${ProductFacetsStyles}
` */
// @name ProductQuantity was invalid
// @note - all fonts are roboto
// font-family: "Roboto";

const ProductQuantity = styleh_components_1.styled.withComponent(Text_1.Text).attrs({
  'data-qa': 'qa-product-quantity'
})`font-size:16px;color:var(--color-black);margin-top:8px;font-weight:500;@media (max-width:1023px){font-size:14px;}`;
exports.ProductQuantity = ProductQuantity;
const FacetContainer = styleh_components_1.styled.withComponent(DetailedList_1.DetailedList)`${DetailedList_1.DetailedListItemPanel}{margin:0;margin-bottom:0.5rem;}${DetailedList_1.DetailedListLabel}{text-transform:capitalize;color:var(--color-dark-grey);}${DetailedList_1.DetailedListValue}{color:var(--color-dark-grey);font-weight:700;margin-left:0.25rem;}`;
exports.FacetContainer = FacetContainer;
const Container = styleh_components_1.styled.div`margin-bottom:0.5rem;`;
exports.Container = Container;
const Label = styleh_components_1.styled.span`font-size:1rem;text-transform:capitalize;color:var(--color-dark-grey);`;
exports.Label = Label;
const Value = styleh_components_1.styled.span`color:var(--color-dark-grey);font-weight:700;margin-left:0.25rem;`;
exports.Value = Value; // @note - all fonts are roboto
// font-family: "Roboto";
// font-family: "Roboto";

const ProductPrice = styleh_components_1.styled.withComponent(ProductPrice_1.ProductPrice)`${ProductPrice_1.RegularPrice}{font-size:16px;color:var(--color-black);font-weight:500;margin-top:8px;@media (max-width:1023px){font-size:14px;}}${props => props.isSubscriptionItem && styleh_components_1.styled.css`margin:16px 24px 16px 0;${ProductPrice_1.SalePrice}{font-weight:700;color:var(--color-red);}`}`;
exports.ProductPrice = ProductPrice;
const FrequencyContent = styleh_components_1.styled.withComponent(Text_1.Text)`margin-left:1rem;`;
exports.FrequencyContent = FrequencyContent;
const StyledFrequencyWrapper = styleh_components_1.styled.withComponent(ProductItem_1.FrequencyWrapper).attrs({
  'data-qa': 'qa-monthly-subscription'
})`align-items:center;justify-content:flex-start;.frequencyIcon{width:28px;height:auto;color:#f88f22;}`;
exports.StyledFrequencyWrapper = StyledFrequencyWrapper; // @todo should not add .blue!!!

const ProductItemButtonOne = styleh_components_1.styled.withComponent(Button_1.Button).attrs({
  'data-qa': 'qa-order-return-trigger'
})`.blue{background:var(--color-blue);}background:var(--color-blue);margin-bottom:15px;`;
exports.ProductItemButtonOne = ProductItemButtonOne;
const ProductItemButtonTwo = styleh_components_1.styled.withComponent(Button_1.Button).attrs({
  'data-qa': 'qa-order-again'
})`background:var(--color-light-grey);`;
exports.ProductItemButtonTwo = ProductItemButtonTwo;
const LinkButtonElement = styleh_components_1.styled.withComponent(Buttons_1.LinkButton)`${Button_1.ButtonText}{color:var(--color-blue);}`;
exports.LinkButtonElement = LinkButtonElement;
const ReviewWrapper = styleh_components_1.styled.div`margin-top:15px;`;
exports.ReviewWrapper = ReviewWrapper;